"use client";

import { Select, SelectItem, Selection } from "@heroui/react";
import { ReactNode } from "react";

type SelectOption = {
  key: string;
  label: string;
};

type CustomSelectProps = {
  label?: string;
  placeholder?: string;
  options: SelectOption[];
  selectedKey?: string;
  defaultSelectedKey?: string;
  onSelectionChange?: (key: string) => void;
  isRequired?: boolean;
  isDisabled?: boolean;
  className?: string;
  size?: "sm" | "md" | "lg";
  variant?: "flat" | "bordered" | "faded" | "underlined";
  errorMessage?: string;
  isInvalid?: boolean;
  startContent?: ReactNode;
  endContent?: ReactNode;
};

const CustomSelect = ({
  label,
  placeholder,
  options,
  selectedKey,
  defaultSelectedKey,
  onSelectionChange,
  isRequired = false,
  isDisabled = false,
  className,
  size = "md",
  variant = "bordered",
  errorMessage,
  isInvalid,
  startContent,
  endContent,
}: CustomSelectProps) => {
  const handleSelectionChange = (keys: Selection) => {
    if (onSelectionChange) {
      const selected = Array.from(keys)[0] as string;
      onSelectionChange(selected);
    }
  };

  return (
    <Select
      label={label}
      placeholder={placeholder}
      selectedKeys={selectedKey ? [selectedKey] : undefined}
      defaultSelectedKeys={
        defaultSelectedKey ? [defaultSelectedKey] : undefined
      }
      onSelectionChange={handleSelectionChange}
      isRequired={isRequired}
      isDisabled={isDisabled}
      className={`bg-white rounded-lg ${className || ""}`}
      size={size}
      variant={variant}
      errorMessage={errorMessage}
      isInvalid={isInvalid}
      startContent={startContent}
      endContent={endContent}
      labelPlacement="outside-left"
      classNames={{
        trigger: "bg-white rounded-lg !z-99",
        value: "text-gray-900",
        listbox: "bg-white rounded-lg",
        popoverContent: "rounded-lg !z-100",
      }}
    >
      {options.map((option) => (
        <SelectItem
          key={option.key}
          textValue={option.label}
          classNames={{
            base: "rounded-md",
          }}
        >
          {option.label}
        </SelectItem>
      ))}
    </Select>
  );
};

export default CustomSelect;