/* eslint-disable @typescript-eslint/no-explicit-any */
import { Trans } from "react-i18next";

interface TimeSelectorProps {
  times: any[];
  handleSelect: (time: string) => void;
  className?: string;
}

function TimeSelector({ times, handleSelect, className }: TimeSelectorProps) {
  return (
    <div className={`transition-opacity ${className}`}>
      <div className="grid grid-cols-4 gap-2 font-medium">
        {times.map((time, index) => (
          <button
            key={index}
            onClick={() => handleSelect(time.value)}
            disabled={!time.active}
            className={[
              "min-w-[40px] h-10 text-[#798FFF] text-sm rounded-full border border-[#798FFF] flex justify-center items-center transition-colors hover:bg-[#798FFF] hover:bg-opacity-20 hover:text-white disabled:text-[#3D425C] disabled:hover:bg-transparent disabled:border-transparent",
            ].join(" ")}
          >
            {time.value}
          </button>
        ))}
      </div>

      <div className="mt-8 flex items-center gap-2">
        <div className="w-4 h-4 bg-[#798FFF] rounded"></div>
        <p className="text-[#798FFF]">
          - <Trans i18nKey={"sidebar.available"}>запись доступна</Trans>
        </p>
      </div>
    </div>
  );
}

export default TimeSelector;
