Function Dropdown

app/_components/GlobalComponents/Dropdowns/Dropdown.tsx:27–162

({
  value,
  options,
  onChange,
  className = "",
  disabled = false,
  placeholder = "",
  iconDropdown = false,
  direction = "down",
}: DropdownProps)

}

export const Dropdown = ({
  value,
  options,
  onChange,
  className = "",
  disabled = false,
  placeholder = "",
  iconDropdown = false,
  direction = "down",
}: DropdownProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const selectedOption = options.find((opt) => opt.id === value);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSelect = (e: React.MouseEvent, optionId: string) => {
    e.preventDefault();
    e.stopPropagation();
    onChange(optionId);
    setIsOpen(false);
  };

  return (
    <div className={`jotty-dropdown relative ${className}`} ref={dropdownRef}>
      {iconDropdown ? (
        <div
          className="jotty-dropdown-icon flex items-center gap-2 cursor-pointer"
          onClick={() => setIsOpen(!isOpen)}
        >
          <MoreHorizontalIcon
            className={cn(
              `h-4 w-4 transition-transform text-muted-foreground`,
              isOpen ? "rotate-180" : "",
              disabled && "opacity-50 text-muted-foreground"
            )}
          />
        </div>
      ) : (
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            if (!disabled) {
              setIsOpen(!isOpen);