// components/admin/RaffleSwitcher.tsx
// Event switcher for the admin dashboard (admin.md section 2.1: two raffles have
// separate pools and separate money). Navigates with a ?raffle= query param.

"use client";

import * as React from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";

interface RaffleOption {
  id: string;
  name: string;
  status: string;
}

export function RaffleSwitcher({
  raffles,
  selectedId,
}: {
  raffles: RaffleOption[];
  selectedId: string;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();

  function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const next = new URLSearchParams(params.toString());
    next.set("raffle", e.target.value);
    router.push(`${pathname}?${next.toString()}`);
  }

  return (
    <div className="flex items-center gap-2">
      <label
        htmlFor="raffle-switcher"
        className="font-body text-body-md font-medium text-ink-strong"
      >
        Sorteo
      </label>
      <select
        id="raffle-switcher"
        value={selectedId}
        onChange={onChange}
        className="min-h-11 rounded-md border border-track bg-canvas px-3 font-body text-body-md text-ink-strong focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-1 focus-visible:outline-steelblue"
      >
        {raffles.map((r) => (
          <option key={r.id} value={r.id}>
            {r.name} ({r.status})
          </option>
        ))}
      </select>
    </div>
  );
}