import React, { useState, useEffect, useCallback } from "react";
import { TestimonialType } from "../services/types";

const TestimonialCard: React.FC<{ item: TestimonialType }> = ({ item }) => (
  <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-[24px] md:rounded-[32px] p-5 md:p-6 min-w-[280px] md:min-w-[320px] max-w-[340px] shadow-xl text-white flex flex-col space-y-4">
    <div className="flex items-center space-x-3">
      <img
        src={item.avatar}
        alt={item.name}
        className="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-white/50 object-cover"
      />
      <div>
        <h4 className="font-bold text-sm md:text-lg">{item.name}</h4>
        <p className="text-white/60 text-[10px] md:text-xs">{item.location}</p>
      </div>
    </div>
    <div className="flex space-x-1">
      {[...Array(item.rating)].map((_, i) => (
        <svg
          key={i}
          className="w-3.5 h-3.5 md:w-4 md:h-4 text-yellow-400"
          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>
    <p className="text-xs md:text-sm font-medium leading-relaxed italic text-white/90 whitespace-normal">
      "{item.content}"
    </p>
  </div>
);
export default TestimonialCard;