"use client";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select";

type SectorOptions = {
  value: string;
  label: string;
};

const sectorOptions: SectorOptions[] = [
  {
    value: "Peneliti/Akademisi",
    label: "Peneliti/Akademisi",
  },
  {
    value: "Pemerintahan",
    label: "Pemerintahan",
  },
  {
    value: "Media",
    label: "Media",
  },
  {
    value: "Industri/Bisnis",
    label: "Industri/Bisnis",
  },
  {
    value: "Organisasi Non Profit/Sosial",
    label: "Organisasi Non Profit/Sosial",
  },
];

export default function SelectSector({
  value,
  onChange,
  name = "sektor",
}: {
  value: string;
  onChange: (v: string) => void;
  name: string;
}) {
  return (
    <Select
      name={name}
      value={value ?? undefined}
      onValueChange={(v) => onChange(String(v))}
    >
      <SelectTrigger className="w-full">
        <SelectValue aria-selected placeholder="Pilih Sektor"></SelectValue>
      </SelectTrigger>
      <SelectContent className="z-[9999]">
        {sectorOptions.map((option) => (
          <SelectItem
            className="cursor-pointer"
            key={option.value}
            value={option.value}
          >
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}