import { memo } from 'react';

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

import logoIcon from '@/assets/iconify/multi-color/logo.svg';
import { useResponsive } from '@/hooks/useSize';

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

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

    return (
        <footer className={`bg-black border-t border-white/10 ${isMobile ? 'min-h-[168px]' : 'min-h-[189px]'}`}>
            <div className={`px-[30px] sm:px-6 lg:px-8 max-w-[1276px] mx-auto ${isMobile ? 'pt-12 pb-12' : 'pt-[49px] pb-[48px]'}`}>
                {isMobile ? (
                    /* Mobile Layout */
                    <div className="flex flex-col items-start gap-5">
                        {/* Logo */}
                        <div className="flex items-center gap-2">
                            <Icon icon={logoIcon} className="w-8 h-8" />
                            <h2 className="text-base font-normal text-white leading-6">
                                {t('components.footerbar.logo')}
                            </h2>
                        </div>
                        {/* Copyright */}
                        <p className="text-sm font-normal leading-[1.43em] text-white/40 text-center">
                            {t('components.footerbar.copyright')}
                        </p>
                    </div>
                ) : (
                    /* Desktop Layout */
                    <div className="flex flex-col gap-8 h-[92px]">
                        {/* Top Section */}
                        <div className="flex items-center justify-between">
                            {/* Logo */}
                            <div className="flex items-center gap-2">
                                <Icon icon={logoIcon} className="w-8 h-8" />
                                <h2 className="text-base font-normal text-white leading-6">
                                    {t('components.footerbar.logo')}
                                </h2>
                            </div>

                            {/* Navigation Links */}
                            <nav className="flex items-center gap-8">
                                <button
                                    onClick={() => handleLinkClick('/privacy')}
                                    className="text-sm font-normal leading-[1.43em] text-white/60 hover:text-white transition-colors border-none bg-transparent whitespace-nowrap"
                                >
                                    {t('components.footerbar.privacyPolicy')}
                                </button>
                                <button
                                    onClick={() => handleLinkClick('/terms-of-service')}
                                    className="text-sm font-normal leading-[1.43em] text-white/60 hover:text-white transition-colors border-none bg-transparent whitespace-nowrap"
                                >
                                    {t('components.footerbar.termsOfService')}
                                </button>
                                <button
                                    onClick={() => handleLinkClick('/contact')}
                                    className="text-sm font-normal leading-[1.43em] text-white/60 hover:text-white transition-colors border-none bg-transparent whitespace-nowrap"
                                >
                                    {t('components.footerbar.contact')}
                                </button>
                            </nav>

                            {/* Social Media Icons */}
                            <div className="flex items-center gap-4">
                                <a
                                    href="https://twitter.com"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="w-10 h-10 flex items-center justify-center bg-white/5 rounded-full hover:bg-white/10 transition-colors"
                                    aria-label="Twitter"
                                >
                                    <Icon icon="ri:twitter-x-fill" className="w-5 h-5 text-white" />
                                </a>
                                <a
                                    href="https://facebook.com"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="w-10 h-10 flex items-center justify-center bg-white/5 rounded-full hover:bg-white/10 transition-colors"
                                    aria-label="Facebook"
                                >
                                    <Icon icon="ri:facebook-fill" className="w-5 h-5 text-white" />
                                </a>
                            </div>
                        </div>

                        {/* Copyright */}
                        <div className="flex justify-center">
                            <p className="text-sm font-normal leading-[1.43em] text-white/40 text-center">
                                {t('components.footerbar.copyright')}
                            </p>
                        </div>
                    </div>
                )}
            </div>
        </footer>
    );
});

Footerbar.displayName = 'Footerbar';

export default Footerbar;