import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle
} from '@/components/ui/card';
import { Routes } from '@/config/routes';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';

export default function CancelPage() {
  return (
    <div className='flex h-screen w-screen flex-col items-center justify-center bg-red-50'>
      <Card className='w-full max-w-xl'>
        <CardHeader>
          <Link href={Routes.HOME} className='mb-4 w-fit'>
            <Image
              src='/logo.svg'
              alt='Magasinet KBH'
              width={120}
              height={120}
              className='size-[80px] md:size-[120px]'
              priority
            />
          </Link>
          <CardTitle className='text-2xl font-bold md:text-4xl'>
            Fejl!
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className='mb-2'>
            Vi beklager. Der er sket en teknisk fejl. Betalingen er ikke gået
            igennem.
          </p>
          <p className='mb-2'>
            Prøv venligst igen. Hvis du stadig oplever fejl, kan du kontakte os
            på{' '}
            <Link
              href='mailto:medlem@magasinetkbh.dk'
              className='text-client-red hover:underline'
            >
              medlem@magasinetkbh.dk
            </Link>
            .
          </p>
        </CardContent>
        <CardFooter>
          <Link
            href={Routes.HOME}
            className='text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2'
          >
            <ArrowLeft className='size-6 transition' />
            <span>Begynd at læse</span>
          </Link>
        </CardFooter>
      </Card>
    </div>
  );
}