'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Star, CheckCircle } from 'lucide-react';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import type { Testimonial } from '@/lib/types';

interface TestimonialsProps {
  testimonials: Testimonial[];
  title?: string;
  subtitle?: string;
  showAll?: boolean;
}

export const Testimonials: React.FC<TestimonialsProps> = ({
  testimonials,
  title = "What Our Customers Say",
  subtitle = "Real experiences from businesses using QR Master",
  showAll = false
}) => {
  const displayTestimonials = showAll ? testimonials : testimonials.slice(0, 3);

  const renderStars = (rating: number) => {
    return (
      <div className="flex gap-1" aria-label={`${rating} out of 5 stars`}>
        {[...Array(5)].map((_, index) => (
          <Star
            key={index}
            className={`w-5 h-5 ${index < rating
              ? 'fill-yellow-400 text-yellow-400'
              : 'fill-gray-200 text-gray-200'
              }`}
          />
        ))}
      </div>
    );
  };

  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            {title}
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {subtitle}
          </p>
        </motion.div>

        <div className={`grid gap-8 ${displayTestimonials.length === 1
          ? 'grid-cols-1 max-w-2xl mx-auto'
          : displayTestimonials.length === 2
            ? 'grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto'
            : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
          }`}>
          {displayTestimonials.map((testimonial, index) => (
            <motion.div
              key={testimonial.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Card hover className="h-full flex flex-col">
                <CardHeader>
                  <div className="flex items-center justify-between mb-3">
                    {renderStars(testimonial.rating)}
                    {testimonial.verified && (
                      <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
                        <CheckCircle className="w-3 h-3" />
                        Verified
                      </span>
                    )}
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">
                    {testimonial.title}
                  </h3>
                </CardHeader>
                <CardContent className="flex-grow">
                  <p className="text-gray-700 leading-relaxed mb-6">
                    {testimonial.content}
                  </p>
                  <div className="border-t border-gray-200 pt-4 mt-auto">
                    <div className="flex flex-col">
                      <span className="font-semibold text-gray-900">
                        {testimonial.author.name}
                      </span>
                      {(testimonial.author.role || testimonial.author.company) && (
                        <div className="text-sm text-gray-700">
                          {testimonial.author.role && (
                            <span>{testimonial.author.role}</span>
                          )}
                          {testimonial.author.role && testimonial.author.company && (
                            <span>, </span>
                          )}
                          {testimonial.author.company && (
                            <span>{testimonial.author.company}</span>
                          )}
                        </div>
                      )}
                      {testimonial.author.location && (
                        <span className="text-sm text-gray-500">{testimonial.author.location}</span>
                      )}
                      <span className="text-xs text-gray-400 mt-1">
                        {testimonial.date}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>


        {!showAll && (
          <div className="mt-12 text-center">
            <a href="/testimonials" className="inline-flex items-center text-blue-600 font-semibold hover:text-blue-700 transition-colors">
              See all reviews
              <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
          </div>
        )}
      </div>
    </section >
  );
};
