import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
} from "@nextui-org/react";
import { FaSort } from "react-icons/fa";

import { sortingOptions } from "@/constants/opportunity-list/opportunity-list-constants";

type ListSortProps = {
  selectedValue: string;
  onSortChange: (value: string) => void;
};

const ListSort = ({ selectedValue, onSortChange }: ListSortProps) => {
  const selectedKey = new Set([selectedValue]);

  const selectedOption = sortingOptions.find(
    (option) => option.key === selectedValue
  );

  const btnLabel = `Sort by: ${
    selectedOption ? selectedOption.value : "recentlyAdded"
  }`;

  return (
    <Dropdown>
      <DropdownTrigger>
        <Button
          className="text-black dark:text-white font-inter font-bold"
          endContent={<FaSort className="size-3" />}
          size="sm"
          variant="ghost"
        >
          {btnLabel}
        </Button>
      </DropdownTrigger>
      <DropdownMenu
        disallowEmptySelection
        aria-label="Sort by"
        selectedKeys={selectedKey}
        selectionMode="single"
      >
        {sortingOptions.map((option) => (
          <DropdownItem
            key={option.key}
            className="font-noto"
            onClick={() => onSortChange(option.key)}
          >
            {option.value}
          </DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  );
};

export default ListSort;