'use client';

import Image from 'next/image';
import { Quote } from 'lucide-react';

export interface TestimonialCardProps {
  quote: string;
  author: string;
  position: string;
  company: string;
  avatarUrl?: string;
  rating?: number;
}

export function TestimonialCard({
  quote,
  author,
  position,
  company,
  avatarUrl,
  rating = 5,
}: TestimonialCardProps) {
  return (
    <div className="relative p-8 rounded-lg border border-[#E5E5E5]/50 bg-white hover:shadow-md transition-shadow">
      <Quote className="absolute top-6 right-6 w-8 h-8 text-[#C41E3A]/10" />
      
      {rating > 0 && (
        <div className="flex gap-1 mb-4">
          {Array.from({ length: rating }).map((_, i) => (
            <svg
              key={i}
              className="w-4 h-4 text-[#C41E3A]"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
          ))}
        </div>
      )}

      <blockquote className="text-base text-[#171717] mb-6 leading-relaxed">
        &ldquo;{quote}&rdquo;
      </blockquote>

      <div className="flex items-center gap-4">
        {avatarUrl && (
          <Image
            src={avatarUrl}
            alt={author}
            width={48}
            height={48}
            className="w-12 h-12 rounded-full object-cover"
          />
        )}
        <div>
          <div className="font-semibold text-[#171717]">{author}</div>
          <div className="text-sm text-[#737373]">
            {position} · {company}
          </div>
        </div>
      </div>
    </div>
  );
}
