'use client';

import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';

export function AuthTabs({ active }: { active: 'login' | 'register' }) {
    const t = useTranslations();

    return (
        <div className="hidden md:flex absolute top-[20%] -translate-y-1/2 end-0 translate-x-1/2 rtl:-translate-x-1/2 z-50 flex-col gap-4 pointer-events-none">
            
            {/* Login Button */}
            <div className={`pointer-events-auto transition-all duration-700 ease-[cubic-bezier(0.34,1.56,0.64,1)] w-56 
                ${active === 'login' 
                    ? 'rtl:-translate-x-16 ltr:translate-x-16 z-20 scale-105 shadow-2xl' 
                    : 'rtl:-translate-x-6 ltr:translate-x-6 z-10 opacity-70 grayscale-[0.5] hover:opacity-100 hover:grayscale-0 hover:translate-x-0'}
                animate-in fade-in slide-in-from-right-32 duration-1000`}>
                <Link
                    href="/login"
                    className={`relative flex items-center justify-center w-full py-2 px-8 rounded-xl font-black text-sm border-[3px] transition-all duration-300 active:scale-95 group overflow-hidden ${
                        active === 'login'
                            ? 'bg-primary-tw-400 text-white border-primary-tw-400 shadow-[0_10px_40px_-10px_rgba(var(--primary),0.5)]'
                            : 'bg-white text-primary-tw-400 border-primary-tw-400 backdrop-blur-sm'
                    }`}
                >
                    <span className="relative z-10 tracking-wide">{t('routes.login')}</span>
                    {active === 'login' && (
                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_2s_infinite] transition-transform" />
                    )}
                </Link>
            </div>

            {/* Register Button */}
            <div className={`pointer-events-auto transition-all duration-700 ease-[cubic-bezier(0.34,1.56,0.64,1)] w-56
                ${active === 'register' 
                    ? 'rtl:-translate-x-16 ltr:translate-x-16 z-20 scale-105 shadow-2xl' 
                    : 'rtl:-translate-x-6 ltr:translate-x-6 z-10 opacity-70 grayscale-[0.5] hover:opacity-100 hover:grayscale-0 hover:translate-x-0'}
                animate-in fade-in slide-in-from-left-32 duration-1000 delay-150`}>
                <Link
                    href="/register"
                    className={`relative flex items-center justify-center w-full py-2 px-8 rounded-xl font-black text-sm border-[3px] transition-all duration-300 active:scale-95 group overflow-hidden ${
                        active === 'register'
                            ? 'bg-primary-tw-400 text-white border-primary-tw-400 shadow-[0_10px_40px_-10px_rgba(var(--primary),0.5)]'
                            : 'bg-white text-primary-tw-400 border-primary-tw-400 backdrop-blur-sm'
                    }`}
                >
                    <span className="relative z-10 tracking-wide">{t('routes.register')}</span>
                    {active === 'register' && (
                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_2s_infinite] transition-transform" />
                    )}
                </Link>
            </div>

            <style jsx global>{`
                @keyframes shimmer {
                    100% {
                        transform: translateX(100%);
                    }
                }
            `}</style>
        </div>
    );
}