import { Star } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

interface TestimonialProps {
  quote: string;
  author: string;
  role: string;
  rating: number;
}

export function Testimonial({ quote, author, role, rating }: TestimonialProps) {
  return (
    <Card className="bg-sand border-0">
      <CardContent className="p-6">
        <div className="flex mb-4">
          {[...Array(5)].map((_, i) => (
            <Star
              key={i}
              className={`h-5 w-5 ${
                i < rating ? 'text-yellow-400 fill-current' : 'text-slate-300'
              }`}
            />
          ))}
        </div>
        <blockquote className="text-lg font-medium text-ink mb-4">
          "{quote}"
        </blockquote>
        <div className="flex items-center">
          <div className="flex-shrink-0">
            <div className="w-10 h-10 bg-navy rounded-full flex items-center justify-center">
              <span className="text-cloud font-semibold text-sm">
                {author.split(' ').map(n => n[0]).join('')}
              </span>
            </div>
          </div>
          <div className="ml-3">
            <p className="text-sm font-semibold text-ink">{author}</p>
            <p className="text-sm text-slate">{role}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}