"use client";
import { useState } from "react";

type Option = {
  label: string;
  value: string | number;
};

type CustomDropdownProps = {
  label?: string;
  placeholder?: string;
  options: Option[];
  defaultValue?: string | number;
  onSelect: (value: string | number) => void;
  className?: string;
};

export default function CustomDropdown({
  label,
  placeholder = "Select an option",
  options,
  defaultValue,
  onSelect,
  className = "",
}: CustomDropdownProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState<string | number | undefined>(
    defaultValue,
  );

  const handleSelect = (value: string | number) => {
    setSelected(value);
    onSelect(value);
    setIsOpen(false);
  };

  const selectedLabel = options.find((opt) => opt.value === selected)?.label;

  return (
    <div className={`relative z-10 flex flex-col px-4 p-1 bg-white border-1 w-full ${className}`}>
      {label && (
        <label className="flex text-xs">{label}</label>
      )}
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex w-full items-center font-medium gap-1 justify-between bg-white py-1 text-left"
      >
        {selectedLabel || placeholder}
        <span
          className={`h-4 w-4 transform transition-transform ${
            isOpen ? "rotate-180" : ""
          }`}
        >
          <i className="icon-[octicon--chevron-down-16]"></i>
        </span>
      </button>

      {isOpen && (
        <ul className="absolute left-0 top-13 z-10 max-h-60 w-full overflow-auto border border-gray-950/50 bg-white">
          {options.map((opt) => {
            const isSelected = selected === opt.value;
            return (
              <li
                key={opt.value}
                onClick={() => handleSelect(opt.value)}
                className={`flex cursor-pointer items-center justify-between px-4 py-2 hover:bg-gray-200 ${
                  isSelected ? "bg-gray-500 text-white" : ""
                }`}
              >
                <span className="text-xs font-medium">{opt.label}</span>
                {isSelected && (
                  <i className="icon-[stash--check-solid]"></i>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}