"use client"
import React, { useState } from 'react';
import { ArrowHeadSVG } from '@/assets/svg';
import { Check } from 'lucide-react';
import { S, H6 } from '../typography';
import { IPlanFeature } from '@/models/Pricing';

interface Props {
    features?: IPlanFeature[] | null;
    includedPackage?: string | null;
    includedPackageFr?: string | null;
    isFr?: boolean;
}

const MenuFeatures = ({ features = [], includedPackage, includedPackageFr, isFr = false }: Props) => {
    const [isOpen, setIsOpen] = useState(false);
    const toggleOpen = () => setIsOpen(!isOpen);

    if (!features?.length) return null;

    return (
        <div className="flex flex-col gap-1">
            <div className="flex items-center gap-1 w-full bg-gray-50 rounded-sm border border-gray-200 p-1 px-4">
                <S
                    onClick={toggleOpen}
                    className="flex items-center w-full gap-2 hover:cursor-pointer max-xl:!text-[12px] text-gray-700"
                >
                    {isFr ? includedPackageFr : includedPackage}
                    <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 p-0 ml-0">
                    {features.map((feature, index) => (
                        <li key={index} className="flex items-center gap-2 sm:gap-2">
                            <Check className="text-green-500 min-w-6 h-6" />
                            <div className="flex items-center gap-1 flex-wrap">
                                <H6 className="!font-medium !text-[13px]">
                                    {isFr ? feature.display_nameFr : feature.display_name}
                                </H6>
                                {feature.access && (
                                    <H6 className="!font-bold !text-[13px]">
                                        ({isFr ? feature.accessFr : feature.access})
                                    </H6>
                                )}
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default MenuFeatures;