import { Star } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

interface TestimonialCardProps {
  name: string
  role: string
  company: string
  avatar: string
  rating: number
  quote: string
}

export function TestimonialCard({ name, role, company, avatar, rating, quote }: TestimonialCardProps) {
  return (
    <Card className="bg-card border-border rounded-xl">
      <CardContent className="p-6">
        <div className="flex flex-col gap-4">
          {/* Rating stars */}
          <div className="flex gap-1">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className={`w-4 h-4 ${
                  i < rating ? 'fill-primary text-primary' : 'fill-muted text-muted-foreground'
                }`}
              />
            ))}
          </div>

          {/* Quote */}
          <p className="text-muted-foreground text-sm leading-relaxed">&ldquo;{quote}&rdquo;</p>

          {/* Author */}
          <div className="flex items-center gap-3 pt-2">
            <Avatar className="w-10 h-10">
              <AvatarImage src={avatar} alt={name} />
              <AvatarFallback>{name.charAt(0)}</AvatarFallback>
            </Avatar>
            <div className="flex flex-col">
              <p className="text-foreground font-semibold text-sm">{name}</p>
              <p className="text-muted-foreground text-xs">
                {role}, {company}
              </p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}