import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type TestimonialCardProps = {
  quote: string;
  name: string;
  role?: string;
  company?: string;
  tags?: string[];
};

export function TestimonialCard({
  quote,
  name,
  role,
  company,
  tags = []
}: TestimonialCardProps) {
  const initials = name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
  const meta = [role, company].filter(Boolean).join(" - ");

  return (
    <Card className="h-full">
      <CardHeader className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary">
            {initials}
          </div>
          <div>
            <CardTitle className="text-base">{name}</CardTitle>
            {meta ? (
              <p className="text-xs text-muted-foreground">{meta}</p>
            ) : null}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-muted-foreground">"{quote}"</p>
        {tags.length > 0 ? (
          <div className="flex flex-wrap gap-2">
            {tags.map((tag) => (
              <Badge key={tag} variant="secondary">
                {tag}
              </Badge>
            ))}
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}
Andrea Pizarro

Julian Morales
