import { Link } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';
import { useTranslation } from 'react-i18next';
import { Route as LoginRoute } from '@/routes/auth/login';
import { Route as SignupRoute } from '@/routes/auth/signup';

export function AuthHero() {
  const { t } = useTranslation('landing');

  return (
    <>
      <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold mb-6'>{t('hero.title')}</h1>
      <p className='text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto'>{t('hero.description')}</p>
      <div className='flex flex-col sm:flex-row gap-4 justify-center items-center'>
        <Link to={LoginRoute.to}>
          <Button
            size='lg'
            className='w-full sm:w-auto min-w-[150px]'>
            {t('hero.loginButton')}
          </Button>
        </Link>
        <Link to={SignupRoute.to}>
          <Button
            size='lg'
            variant='outline'
            className='w-full sm:w-auto min-w-[150px]'>
            {t('hero.signupButton')}
          </Button>
        </Link>
      </div>
    </>
  );
}