import React from 'react';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Button,
  Label,
} from 'xertica-ui/ui';
import { LockIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';

export function LoginTemplate() {
  const { t } = useTranslation();
  return (
    <div className="flex h-full min-h-0 w-full items-center justify-center bg-muted/30 p-4 overflow-y-auto">
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
              <LockIcon className="size-6" />
            </div>
          </div>
          <CardTitle className="text-2xl">{t('loginTemplate.title')}</CardTitle>
          <CardDescription>{t('loginTemplate.description')}</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-2 text-left">
            <Label htmlFor="email">{t('loginTemplate.emailLabel')}</Label>
            <Input
              id="email"
              type="email"
              placeholder={t('loginTemplate.emailPlaceholder')}
              required
            />
          </div>
          <div className="grid gap-2 text-left">
            <div className="flex items-center">
              <Label htmlFor="password">{t('loginTemplate.passwordLabel')}</Label>
              <a
                href="#"
                className="ml-auto inline-block text-sm text-muted-foreground underline hover:text-primary"
              >
                {t('loginTemplate.forgotPassword')}
              </a>
            </div>
            <Input id="password" type="password" required />
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">{t('loginTemplate.submit')}</Button>
        </CardFooter>
      </Card>
    </div>
  );
}