import { memo } from 'react';

import { Icon } from '@iconify/react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import logoUnion from '@/assets/iconify/multi-color/logo-union.svg';

const Footerbar = memo(() => {
    const { t } = useTranslation();
    const navigate = useNavigate();

    const handleLinkClick = (path: string) => {
        navigate(path);
    };

    const navLinks = [
        { path: '/privacy', labelKey: 'components.footerbar.privacyPolicy' },
        { path: '/terms-of-service', labelKey: 'components.footerbar.termsOfService' },
        { path: '/contact', labelKey: 'components.footerbar.contact' },
    ] as const;

    return (
        <footer className="bg-black border-t border-white/10">
            <div className="max-w-[1440px] mx-auto px-5 py-5 lg:px-20 lg:py-[50px]">
                {/* Phone & Tablet: stacked centered / Desktop: row space-between */}
                <div className="flex flex-col items-center gap-8 lg:flex-row lg:items-center lg:justify-between">
                    {/* Logo + Copyright */}
                    <div className="flex flex-col items-center gap-4 lg:items-start">
                        <div className="flex items-center gap-3">
                            <Icon icon={logoUnion} className="w-8 h-8" />
                            <h2 className="text-2xl font-bold italic text-white leading-none font-[REM] tracking-wide">
                                {t('components.footerbar.logo')}
                            </h2>
                        </div>
                        <p className="text-sm font-normal leading-[1.43] text-white/40 text-center lg:text-left">
                            {t('components.footerbar.copyright')}
                        </p>
                    </div>

                    {/* Navigation Links */}
                    <nav className="flex items-center justify-center gap-8">
                        {navLinks.map(({ path, labelKey }) => (
                            <button
                                key={path}
                                onClick={() => handleLinkClick(path)}
                                className="text-sm font-normal leading-[1.43] text-white/60 hover:text-white transition-colors border-none bg-transparent whitespace-nowrap"
                            >
                                {t(labelKey)}
                            </button>
                        ))}
                    </nav>
                </div>
            </div>
        </footer>
    );
});

Footerbar.displayName = 'Footerbar';

export default Footerbar;
