"use client";

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

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

const purposeOptions: PurposeOptions[] = [
  {
    value:
      "Mencari data terbuka Pemerintah Daerah untuk kepentingan bisnis, perumusan kebijakan, atau referensi pribadi lainnya",
    label:
      "Mencari data terbuka Pemerintah Daerah untuk kepentingan bisnis, perumusan kebijakan, atau referensi pribadi lainnya",
  },
  {
    value:
      "Mencari data terbuka Pemerintah Daerah untuk kepentingan bahan ajar/kurikulum/tugas belajar",
    label:
      "Mencari data terbuka Pemerintah Daerah untuk kepentingan bahan ajar/kurikulum/tugas belajar",
  },
  {
    value: "Mencari data untuk membuktikan kebenaran atas sebuah isu tertentu",
    label: "Mencari data untuk membuktikan kebenaran atas sebuah isu tertentu",
  },
  {
    value:
      "Mempelajari lebih lanjut terkait transparansi data dan informasi yang dimiliki oleh Pemerintah Daerah",
    label:
      "Mempelajari lebih lanjut terkait transparansi data dan informasi yang dimiliki oleh Pemerintah Daerah",
  },
];

export default function SelectPurpose({
  value,
  onChange,
  name = "tujuan",
}: {
  value: string;
  onChange: (v: string) => void;
  name: string;
}) {
  return (
    <Select
      name={name}
      value={value ?? undefined}
      onValueChange={(v) => onChange(String(v))}
    >
      <SelectTrigger className="w-full max-w-[460px]">
        <SelectValue aria-selected placeholder="Pilih Tujuan"></SelectValue>
      </SelectTrigger>

      <SelectContent className="z-[9999] w-full max-w-[460px] truncate">
        {purposeOptions.map((option) => (
          <SelectItem
            key={option.value}
            value={option.value}
            className="max-w-full text-wrap"
          >
            <span className="block">{option.label}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}