import { useTranslations } from 'next-intl';
import Link from 'next/link';

interface CancelPageProps {
  params: { locale: string };
}

export default function CancelPage({ params }: CancelPageProps) {
  const t = useTranslations('Cancel');
  const { locale } = params;

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4 py-12">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-lg p-8 text-center">
        {/* Warning icon */}
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-orange-100">
          <svg
            className="h-10 w-10 text-orange-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2.5}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </div>

        {/* Title */}
        <h1 className="text-2xl font-bold text-gray-900 mb-3">
          {t('title')}
        </h1>

        {/* Cancellation message */}
        <p className="text-gray-600 mb-8">
          {t('message')}
        </p>

        {/* Try Again button */}
        <Link
          href={`/${locale}/apply`}
          className="inline-block w-full rounded-lg bg-blue-600 px-6 py-3 text-white font-medium hover:bg-blue-700 transition-colors mb-3"
        >
          {t('retry')}
        </Link>

        {/* Back to Home link */}
        <Link
          href={`/${locale}`}
          className="inline-block w-full rounded-lg border border-gray-300 px-6 py-3 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
        >
          {t('backHome')}
        </Link>
      </div>
    </div>
  );
}