import React from 'react';

const TestimonialCard = ({ avatar, name, role, company, content, rating, delay, isVisible }) => {
  // Render star rating
  const renderStars = (rating) => {
    return Array.from({ length: 5 }, (_, index) => (
      <svg
        key={index}
        className={`w-5 h-5 ${
          index < rating ? 'text-yellow-400' : 'text-gray-300'
        }`}
        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>
    ));
  };

  return (
    <div
      className="group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-up"
      style={{ animationDelay: delay }}
    >
      {/* Quote icon background */}
      <div className="absolute top-6 right-6 opacity-10 group-hover:opacity-20 transition-opacity duration-300">
        <svg className="w-16 h-16 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
        </svg>
      </div>

      {/* Rating stars */}
      <div className="flex items-center gap-1 mb-6">
        {renderStars(rating)}
      </div>

      {/* Testimonial content */}
      <blockquote className="text-gray-700 leading-relaxed mb-8 group-hover:text-gray-600 transition-colors duration-300">
        <p className="text-lg italic">"{content}"</p>
      </blockquote>

      {/* Author information */}
      <div className="flex items-center">
        {/* Avatar with enhanced styling */}
        <div className="relative mr-4">
          <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-lg group-hover:shadow-xl transition-shadow duration-300">
            {avatar}
          </div>
          {/* Avatar ring effect */}
          <div className="absolute inset-0 rounded-full border-4 border-white shadow-lg group-hover:border-primary-200 transition-all duration-300"></div>
        </div>

        {/* Author details */}
        <div className="flex-1">
          <h4 className="font-bold text-gray-900 text-lg group-hover:text-primary-600 transition-colors duration-300">
            {name}
          </h4>
          <p className="text-gray-600 text-sm group-hover:text-gray-700 transition-colors duration-300">
            {role}
          </p>
          <p className="text-gray-500 text-xs group-hover:text-gray-600 transition-colors duration-300">
            {company}
          </p>
        </div>
      </div>

      {/* Decorative elements */}
      <div className="mt-6 pt-6 border-t border-gray-100">
        <div className="flex items-center justify-between">
          <div className="w-12 h-px bg-gradient-to-r from-transparent via-primary-200 to-transparent"></div>
          <div className="px-3">
            <svg className="w-4 h-4 text-primary-400 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
            </svg>
          </div>
          <div className="w-12 h-px bg-gradient-to-r from-transparent via-primary-200 to-transparent"></div>
        </div>
      </div>

      {/* Hover overlay effect */}
      <div className="absolute inset-0 bg-gradient-to-br from-primary-50/20 to-accent-50/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </div>
  );
};

export default TestimonialCard;