import { Star } from "lucide-react";
import { SectionHeader } from "@/components/landing/section-header";
import type { Testimonial } from "@prisma/client";

interface TestimonialsSectionProps {
  testimonials: Testimonial[];
}

export function TestimonialsSection({ testimonials }: TestimonialsSectionProps) {
  if (testimonials.length === 0) return null;

  const [featured, ...supporting] = testimonials;

  return (
    <section id="testimonials" className="section-default surface-muted">
      <div className="content-wrap">
        <SectionHeader
          eyebrow="Reviews"
          title="Trusted by neighbors across the city"
          description="Real feedback from homeowners and businesses we've helped."
        />

        <div className="grid lg:grid-cols-12 gap-6 lg:gap-8">
          <blockquote className="lg:col-span-7 surface-elevated p-8 md:p-12 flex flex-col justify-between">
            <div>
              <div className="flex gap-1 mb-6">
                {[...Array(featured.rating)].map((_, i) => (
                  <Star key={i} className="h-4 w-4 fill-accent text-accent" />
                ))}
              </div>
              <p className="font-heading text-2xl md:text-[1.75rem] leading-snug text-foreground text-balance">
                &ldquo;{featured.review}&rdquo;
              </p>
            </div>
            <footer className="mt-10 pt-8 border-t border-border/80">
              <p className="font-medium text-foreground">{featured.name}</p>
              {featured.location && (
                <p className="text-sm text-muted-foreground mt-1">{featured.location}</p>
              )}
            </footer>
          </blockquote>

          <div className="lg:col-span-5 flex flex-col gap-4">
            {supporting.slice(0, 2).map((testimonial) => (
              <blockquote
                key={testimonial.id}
                className="surface-elevated p-6 flex-1 flex flex-col justify-between"
              >
                <p className="text-muted-foreground leading-relaxed text-sm md:text-base">
                  &ldquo;{testimonial.review}&rdquo;
                </p>
                <footer className="mt-5">
                  <p className="text-sm font-medium text-foreground">{testimonial.name}</p>
                  {testimonial.location && (
                    <p className="text-xs text-muted-foreground mt-0.5">{testimonial.location}</p>
                  )}
                </footer>
              </blockquote>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}