'use client'

import React, { useState } from 'react';
import { ArrowHeadSVG } from '@/assets/svg';
import { S, H6 } from '../typography';
import { Check } from 'lucide-react';
import { useTranslations } from 'next-intl';

interface Plan {
  display_name: string;
  display_nameFr: string;
  price: number;
}

interface Props {
  plans: Plan[];
  isFr: boolean;
  extraPackageName:string | null,
  selectedPlan?: Plan;
  onChange: (plan: Plan) => void;
}

const MenuExtraPackagePlans = ({extraPackageName, plans, isFr, selectedPlan, onChange }: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleOpen = () => setIsOpen(!isOpen);
  const t = useTranslations()

  return (
    <div className="flex flex-col gap-1 mt-2">
      <div
        className="flex items-center gap-1 w-full bg-gray-50 rounded-sm border border-gray-200 p-1 px-4"
        onClick={toggleOpen}
      >
        <S className="flex items-center w-full gap-2 hover:cursor-pointer max-xl:!text-[12px] text-gray-700">
         {t("Pack")} {isFr ? selectedPlan?.display_nameFr : selectedPlan?.display_name} {t("of")} {extraPackageName} - {selectedPlan?.price} €
          <ArrowHeadSVG
            className={`inline-block text-muted-foreground h-4 w-4 hover:text-foreground transition -rotate-90 ${
              isOpen && 'rotate-0'
            }`}
          />
        </S>
      </div>

      <div className={`overflow-hidden transition-[max-height] duration-500 ease-in-out ${isOpen ? 'max-h-[300px]' : 'max-h-0'}`}>
        <ul className="flex flex-col gap-2 py-2">
          {plans.map((plan, index) => (
            <li
              key={index}
              onClick={() => {
                onChange(plan);
                setIsOpen(false);
              }}
              className="flex justify-between items-center px-4 py-2 hover:bg-gray-100 cursor-pointer"
            >
              <H6 className="!text-[13px]">
                {t("Pack")} {isFr ? plan.display_nameFr : plan.display_name} - {plan?.price} €
              </H6>
              {plan.display_name === selectedPlan?.display_name && (
                <Check className="text-green-500 w-4 h-4" />
              )}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default MenuExtraPackagePlans;