"use client";

import { useRouter, useSearchParams } from "next/navigation";

type ProjectOption = {
  id: string;
  name: string;
};

export function ProjectSelector({
  projects,
  selectedProjectId
}: {
  projects: ProjectOption[];
  selectedProjectId?: string;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();

  return (
    <select
      className="field max-w-xs"
      value={selectedProjectId ?? ""}
      aria-label="Project selector"
      onChange={(event) => {
        const params = new URLSearchParams(searchParams.toString());
        params.set("projectId", event.target.value);
        router.push(`?${params.toString()}`);
      }}
    >
      {projects.map((project) => (
        <option key={project.id} value={project.id}>
          {project.name}
        </option>
      ))}
    </select>
  );
}