import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { PartOption } from "@/types/parts";

type DropdownProps = {
  options: PartOption[];
  onSelectOption: (option: PartOption) => void;
  selectedOption: string;
};

export default function PartDropdown({
  options,
  onSelectOption,
  selectedOption,
}: DropdownProps) {
  return (
    <Menu as="div" className="relative inline-block text-left w-full">
      <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-brandblue rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
        Selected option: {selectedOption ?? ""}{" "}
        <ChevronDownIcon
          className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
          aria-hidden="true"
        />
      </Menu.Button>
      <Transition
        as={Fragment}
        enter="transition ease-out duration-200"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Menu.Items className="origin-bottom left-0 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
          {options.map((option) => (
            <Menu.Item key={option.part}>
              {({ active }) => (
                <button
                  className={`${
                    active ? "bg-brandmidblue text-white" : "text-gray-900"
                  } group flex items-center w-full px-4 py-2 text-sm`}
                  onClick={() => onSelectOption(option)}
                >
                  {option.label}
                </button>
              )}
            </Menu.Item>
          ))}
        </Menu.Items>
      </Transition>
    </Menu>
  );
}
