'use client';

import { useEffect } from 'react';

import Link from 'next/link';

import { AlertTriangle } from 'lucide-react';
import { useTranslations } from 'next-intl';

import { Button } from '@kit/ui/button';

export default function AccountError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const t = useTranslations('common');

  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center py-24 text-center">
      <div className="bg-destructive/10 mb-4 rounded-full p-4">
        <AlertTriangle className="text-destructive h-8 w-8" />
      </div>
      <h2 className="text-xl font-semibold">{t('error.title')}</h2>
      <p className="text-muted-foreground mt-2 max-w-md text-sm">
        {t('error.description')}
      </p>
      <div className="mt-6 flex gap-2">
        <Button onClick={reset}>{t('error.retry')}</Button>
        <Button variant="outline" asChild>
          <Link href="/home">{t('error.toDashboard')}</Link>
        </Button>
      </div>
    </div>
  );
}