import React from "react";
import { cn } from "../lib/utils";
import { Card } from "./ui/card";

interface TestimonialCardProps {
    quote: string;
    author: string;
    role: string;
    avatarGradient: string;
    className?: string;
}

export function TestimonialCard({
    quote,
    author,
    role,
    avatarGradient,
    className,
}: TestimonialCardProps) {
    return (
        <Card className={cn("glass-card border-none p-6 space-y-4", className)}>
            <div className="flex gap-1 text-yellow-500">
                {[1, 2, 3, 4, 5].map((_, i) => (
                    <svg key={i} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" className="w-4 h-4">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                ))}
            </div>
            <p className="text-muted-foreground italic">
                "{quote}"
            </p>
            <div className="flex items-center gap-3 pt-2">
                <div className={cn("w-10 h-10 rounded-full animate-gradient", avatarGradient)} />
                <div>
                    <p className="font-bold text-sm text-primary">{author}</p>
                    <p className="text-xs text-muted-foreground">{role}</p>
                </div>
            </div>
        </Card>
    );
}