"use client";
import * as React from "react";

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

import { Controller } from "react-hook-form";
type SelectTypes = {
  value: string;
  label: string;
};
// const options : GenderTypes[] = [{value: 'MALE', label:'Male'},{value: 'FEMALE', label:'female'}]

export default function CustomSelect({
  control,
  name,
  placeholder,
  label,
  options,
  className,
  disabled,
}: {
  control?: any;
  name: string;
  label?: string;
  className?: string;
  placeholder?: string;
  options: SelectTypes[];
  disabled?: boolean;
}) {
 
   

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => {
        // Ensure value is properly formatted - convert to string for comparison
        const matchingOption = options?.find(
          (opt) => String(opt.value) === String(field.value)
        );


        return (
          <Select
            onValueChange={field.onChange}
            value={field.value}
            disabled={disabled}
          >
            <div className="flex flex-col gap-[2px] ">
              {label && (
                <label className="block px-1 text-sm font-extralight text-dark mb-1">
                  {label}
                </label>
              )}
              <SelectTrigger
                className={`w-full py-2 px-0 text-dark bg-white ${
                  className && className
                }  ${!field.value ? 'text-gray-400 lg:text-[14px] font-light' : ''}`}
              >
                <SelectValue
                  placeholder={placeholder ? placeholder : "Select..."}
                />
              </SelectTrigger>
            </div>

            <SelectContent className="bg-white !border-none rounded-md p-0 mt-1  relative z-[9999]">
              <SelectGroup className="max-h-60 overflow-auto">
                {options?.map((option) => (
                  <SelectItem
                    className="cursor-pointer hover:!bg-primary focus:!bg-primary py-2 px-2 text-dark"
                    key={option.value}
                    value={option.value}
                  >
                    {option.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        );
      }}
    />
  );
}