import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export type NewsletterSignupProps = {
  title: string;
  description: string;
  placeholder?: string;
  buttonLabel?: string;
  helper?: string;
};

export function NewsletterSignup({
  title,
  description,
  placeholder = "tu@email.com",
  buttonLabel = "Suscribirme",
  helper = "Sin spam. Puedes salir cuando quieras."
}: NewsletterSignupProps) {
  return (
    <Card className="h-full">
      <CardHeader className="space-y-2">
        <CardTitle className="text-lg">{title}</CardTitle>
        <CardDescription className="text-sm">{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="flex flex-col gap-3 sm:flex-row">
          <Input type="email" placeholder={placeholder} />
          <Button className="sm:w-auto">{buttonLabel}</Button>
        </div>
        <p className="text-xs text-muted-foreground">{helper}</p>
      </CardContent>
    </Card>
  );
}
Notas de interfaz
