import Link from 'next/link';

import { MailX } from 'lucide-react';

import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

interface Props {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ token?: string }>;
}

export default async function NewsletterUnsubscribePage({
  params,
  searchParams,
}: Props) {
  const { slug } = await params;
  const { token } = await searchParams;

  return (
    <div className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
      <Card className="w-full max-w-md text-center">
        <CardHeader>
          <div className="bg-destructive/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
            <MailX className="text-destructive h-6 w-6" />
          </div>
          <CardTitle>Newsletter abbestellen</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {token ? (
            <>
              <p className="text-muted-foreground text-sm">
                Möchten Sie den Newsletter wirklich abbestellen?
              </p>
              <Button variant="destructive" className="w-full">
                Abbestellen bestätigen
              </Button>
            </>
          ) : (
            <p className="text-muted-foreground text-sm">
              Kein gültiger Abmeldelink. Bitte verwenden Sie den Link aus der
              Newsletter-E-Mail.
            </p>
          )}
          <Link href={`/club/${slug}`}>
            <Button variant="outline" size="sm">
              ← Zurück zur Website
            </Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  );
}