import React, { forwardRef } from "react";
import { TestimonialSectionProps } from "../../types";
import { Card, CardContent } from "../ui/Card";

export const TestimonialSection = forwardRef<
  HTMLElement,
  TestimonialSectionProps
>(
  (
    {
      className = "",
      title = "What Our Customers Say",
      subtitle = "Don't just take our word for it - hear from our satisfied customers",
      testimonials = [
        {
          content:
            "This component library saved us weeks of development time. The authentication system works flawlessly.",
          author: "Sarah Johnson",
          role: "Lead Developer",
          company: "TechCorp",
          rating: 5,
        },
        {
          content:
            "The design is beautiful and the components are well-documented. Highly recommended!",
          author: "Mike Chen",
          role: "Frontend Engineer",
          company: "StartupXYZ",
          rating: 5,
        },
        {
          content:
            "Excellent TypeScript support and great accessibility features. Perfect for our needs.",
          author: "Emma Davis",
          role: "UI/UX Designer",
          company: "DesignCo",
          rating: 5,
        },
      ],
      variant = "cards",
      children,
      ...props
    },
    ref
  ) => {
    const renderStars = (rating: number = 5) => {
      return Array.from({ length: 5 }, (_, i) => (
        <svg
          key={i}
          className={`w-4 h-4 ${
            i < rating ? "text-yellow-400 fill-current" : "text-gray-300"
          }`}
          viewBox="0 0 20 20"
          aria-hidden="true"
        >
          <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>
      ));
    };

    const renderTestimonial = (
      testimonial: (typeof testimonials)[0],
      index: number
    ) => (
      <Card key={index} className="h-full">
        <CardContent className="p-6">
          <div className="flex items-center mb-4">
            {renderStars(testimonial.rating)}
          </div>

          <blockquote className="text-muted-foreground mb-4 italic">
            &quot;{testimonial.content}&quot;
          </blockquote>

          <div className="flex items-center">
            {testimonial.avatar && (
              <img
                src={testimonial.avatar}
                alt={testimonial.author}
                className="w-10 h-10 rounded-full mr-3"
              />
            )}
            <div>
              <div className="font-semibold text-foreground">
                {testimonial.author}
              </div>
              {(testimonial.role || testimonial.company) && (
                <div className="text-sm text-muted-foreground">
                  {testimonial.role}
                  {testimonial.role && testimonial.company && " at "}
                  {testimonial.company}
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    );

    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 ${className}`}
        {...props}
      >
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
              {title}
            </h2>
            {subtitle && (
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>

          <div
            className={
              variant === "grid"
                ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                : variant === "carousel"
                ? "flex overflow-x-auto space-x-6 pb-4"
                : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            }
          >
            {testimonials.map((testimonial, index) =>
              renderTestimonial(testimonial, index)
            )}
          </div>

          {children}
        </div>
      </section>
    );
  }
);

TestimonialSection.displayName = "TestimonialSection";