import { ShieldOff } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';

export function AccessDeniedPage() {
    const { t } = useTranslation();
    const navigate = useNavigate();

    return (
        <div className="flex flex-col items-center justify-center py-16 text-center space-y-4">
            <ShieldOff className="size-12 text-destructive" />
            <h1 className="text-2xl font-semibold" data-testid="access-denied-title">
                {t('error.403.title')}
            </h1>
            <p className="text-muted-foreground max-w-sm" data-testid="access-denied-message">
                {t('error.403.message')}
            </p>
            <Button
                onClick={() => void navigate({ to: '/dashboard' })}
                data-testid="access-denied-back-button"
            >
                {t('error.backToDashboard')}
            </Button>
        </div>
    );
}