"use client"
import { ArrowHeadSVG } from '@/assets/svg';
import React, { useState } from 'react'
import { S } from '../typography';
import { useLocale, useTranslations } from 'next-intl';
import Typography from '../typography/Typography';

interface IFooterMenu {
    menu: {
        title: string,
        links: {
            title: string,
            link: string,
            link_en: string
        }[]
    }
}
const FooterMenu = ({ menu }: IFooterMenu) => {
    const t = useTranslations()
    const [isOpen, setIsOpen] = useState(false);
    const toggleOpen = () => { setIsOpen(!isOpen); };
    const locale = useLocale()

    return (
        <div className='flex flex-col gap-4'>
            <S onClick={toggleOpen} className='flex items-center  gap-10 max-lg:justify-between max-lg:hover:cursor-pointer lg:mt-4'>
                {t(menu.title)}
                <ArrowHeadSVG className={`inline-block text-muted-foreground h-6 w-6 lg:hidden hover:text-foreground transition -rotate-90 ${isOpen && "rotate-[0deg]"}`} />
            </S>

            <div
                className={`overflow-hidden transition-[max-height] duration-500 ease-in-out ${isOpen ? 'max-h-80' : 'max-h-0'} lg:max-h-full`}>
                <ul className="flex  flex-col lg:gap-4 max-lg:mb-4 ">
                    {menu.links.map((link, index) => (
                        <li key={index} className="">
                            <Typography as='small' link={locale === "en" ? link.link_en : link.link} className='text-muted-foreground text-sm  hover:text-primary transition'>{t(link.title)}</Typography>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    )
}

export default FooterMenu