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

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

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

  return (
    <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
            <Mail className="h-6 w-6 text-primary" />
          </div>
          <CardTitle>Newsletter abonnieren</CardTitle>
          <p className="text-sm text-muted-foreground">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-xs text-center text-muted-foreground">
              Sie können sich jederzeit abmelden. Wir senden Ihnen eine Bestätigungs-E-Mail.
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
