import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { IoChatbubbleEllipses } from "react-icons/io5"

interface TestimonialCardProps {
  quote: string
  name: string
  role: string
  avatarSrc?: string
  className?: string
}

export function TestimonialCard({
  quote = "This product has completely transformed how we work. The interface is intuitive and the features are exactly what we needed.",
  name = "Sarah Johnson",
  role = "Product Manager",
  avatarSrc = "/avatar-woman-1.png",
  className,
}: TestimonialCardProps) {
  return (
    <Card className={className}>
      <CardContent className="pt-6">
        <IoChatbubbleEllipses className="h-8 w-8 text-primary/20 mb-2" />
        <p className="text-lg italic">{quote}</p>
      </CardContent>
      <CardFooter className="flex items-center gap-3">
        <Avatar>
          <AvatarImage src={avatarSrc || "/placeholder.svg"} alt={name} />
          <AvatarFallback>
            {name
              .split(" ")
              .map((n) => n[0])
              .join("")}
          </AvatarFallback>
        </Avatar>
        <div>
          <p className="font-medium">{name}</p>
          <p className="text-sm text-muted-foreground">{role}</p>
        </div>
      </CardFooter>
    </Card>
  )
}