'use client';

import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
import clsx from "clsx";
import React from "react";

type MenuSortingDrawerProps = {
  visible: boolean;
  onClose: () => void;
  sortings: ReadonlyArray<string>;
  activeIndex: number;
  onSelect: (index: number) => void;
  tMenu: (key: string) => string;
};

const MenuSortingDrawer = ({
  visible,
  onClose,
  sortings,
  activeIndex,
  onSelect,
  tMenu,
}: MenuSortingDrawerProps) => {
  return (
    <AnimatedBottomSheet
      title={tMenu("MenuSortingDrawer.Heading")}
      visible={visible}
      inDelay={150}
      onClick={onClose}
    >
      <div className="px-8.5 py-10 flex flex-col gap-2">
        {sortings.map((value, index) => {
          const isActive = index === activeIndex;
          return (
            <button
              key={value}
              type="button"
              onClick={() => onSelect(index)}
              className={clsx(
                "flex items-center justify-between py-3 text-sm2 transition-colors",
                isActive ? "text-primary font-semibold" : "text-foreground"
              )}
            >
              <span>{tMenu(`MenuSortingDrawer.Options.${value}`)}</span>
            </button>
          );
        })}
      </div>
    </AnimatedBottomSheet>
  );
};

export default MenuSortingDrawer;

