import { Mail } from 'lucide-react';

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

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

export default async function NewsletterSubscribePage({ params }: Props) {
  const { slug } = await params;

  return (
    <div className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
            <Mail className="text-primary h-6 w-6" />
          </div>
          <CardTitle>Newsletter abonnieren</CardTitle>
          <p className="text-muted-foreground text-sm">
            Bleiben Sie über Neuigkeiten informiert.
          </p>
        </CardHeader>
        <CardContent>
          <form className="space-y-4">
            <div className="space-y-2">
              <Label>Name (optional)</Label>
              <Input name="name" placeholder="Max Mustermann" />
            </div>
            <div className="space-y-2">
              <Label>E-Mail-Adresse *</Label>
              <Input
                name="email"
                type="email"
                placeholder="ihre@email.de"
                required
              />
            </div>
            <Button type="submit" className="w-full">
              Abonnieren
            </Button>
            <p className="text-muted-foreground text-center text-xs">
              Sie können sich jederzeit abmelden. Wir senden Ihnen eine
              Bestätigungs-E-Mail.
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}