import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface Testimonial {
  name: string;
  date: string;
  quote: string;
  image?: string;
}

const testimonials: Testimonial[] = [
  {
    name: "Sara B",
    date: "awarded on August 8, 2025",
    quote: "Thank you so much! I will us this money to fund my life long passion for airplanes and getting my pilots license. I cannot appreciate this enough.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_182.jpeg"
  },
  {
    name: "Natacha D",
    date: "awarded on May 22, 2025",
    quote: "Thank you for your generous donation. I appreciate your support more than words can express.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_171.jpg"
  },
  {
    name: "Latoya W",
    date: "awarded on May 7, 2025",
    quote: "Thank you I appreciate it."
  },
  {
    name: "Tammy M",
    date: "awarded on April 10, 2025",
    quote: "Dear Givesback Donors, Thank you so much... I have never received anything like this before and it's going help so much. ... I have a piece of equipment that needs replaced and this will help tremendously... Thank you so much again."
  },
  {
    name: "Felix E",
    date: "awarded on March 19, 2025",
    quote: "Thank you so much. I will use this for transportation."
  },
  {
    name: "Christina O",
    date: "awarded on November 6, 2024",
    quote: "THANK YOU! THANK YOU! THANK YOU! For some reason I cannot fathom, I didnt open this until today, December 13th, 2024. Nothing good EVER happens to me, so I never imagined anything truly MAGNIFICENT occurring!"
  },
  {
    name: "Anthony M",
    date: "awarded on September 10, 2024",
    quote: "Thank you Giveback Donors. I was so surprised to open my mail to find a $250 check with my name on it. It's literally the first thing I've ever won. I can't be happier and I owe it all to Giveback Donors."
  },
  {
    name: "Scott K",
    date: "awarded on July 9, 2024",
    quote: "Hello GIVES BACK, I want to say how very much I appreciate your $250.00 contribution in helping me provide for daily expenses. The cost of living is incredibly rough nowdays, and this will indeed help me."
  },
];

export const TestimonialsGrid = () => {
  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-3xl font-bold text-foreground mb-2">Past Award Recipients</h2>
        <p className="text-muted-foreground">See what our winners have to say</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {testimonials.map((testimonial, index) => (
          <Card key={index} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
            {testimonial.image && (
              <div className="aspect-video bg-muted rounded-t-lg overflow-hidden">
                <img
                  src={testimonial.image}
                  alt={`${testimonial.name} testimonial`}
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.style.display = 'none';
                  }}
                />
              </div>
            )}
            
            <CardContent className="p-6">
              <div className="mb-4">
                <h4 className="font-semibold text-lg text-foreground">{testimonial.name}</h4>
                <Badge variant="secondary" className="text-xs">
                  {testimonial.date}
                </Badge>
              </div>
              
              <blockquote className="text-muted-foreground italic leading-relaxed">
                "{testimonial.quote}"
              </blockquote>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};