import Link from 'next/link';

import { AlertTriangle } from 'lucide-react';
import { getTranslations } from 'next-intl/server';

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

interface AccountNotFoundProps {
  title?: string;
  description?: string;
  buttonLabel?: string;
}

export async function AccountNotFound({
  title,
  description,
  buttonLabel,
}: AccountNotFoundProps = {}) {
  const t = await getTranslations('common');

  const resolvedTitle = title ?? t('accountNotFoundCard.title');
  const resolvedDescription = description ?? t('accountNotFoundCard.description');
  const resolvedButtonLabel = buttonLabel ?? t('accountNotFoundCard.action');

  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">{resolvedTitle}</h2>
      <p className="text-muted-foreground mt-2 max-w-md text-sm">
        {resolvedDescription}
      </p>
      <div className="mt-6">
        <Button variant="outline" asChild>
          <Link href="/home">{resolvedButtonLabel}</Link>
        </Button>
      </div>
    </div>
  );
}