import React from 'react'
import { Star } from 'lucide-react'
import { AnimateIn } from '@/components/AnimateIn'

interface ReviewItem {
  author: string
  location?: string
  rating?: number
  content: string
}

interface ReviewsBlockProps {
  badge?: string
  heading: string
  subheading?: string
  items?: ReviewItem[]
}

export function ReviewsBlockComponent(props: ReviewsBlockProps) {
  const { badge, heading, subheading, items } = props

  return (
    <section className="py-24 bg-white border-b-2 border-[#1f1f1f]">
      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
        <AnimateIn direction="up">
          <div className="max-w-3xl mb-14">
            {badge && (
              <div className="inline-block bg-[#FFED00] text-[#1f1f1f] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-[#1f1f1f]">
                {badge}
              </div>
            )}
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
              {heading}
            </h2>
            {subheading && (
              <p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
                {subheading}
              </p>
            )}
          </div>
        </AnimateIn>

        {items && items.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
            {items.map((item, idx) => (
              <AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
                <div
                  className="bg-[#f4f4f4] border-2 border-[#1f1f1f] p-8 h-full flex flex-col justify-between hover-lift transition-all"
                >
                  <div>
                    <div className="flex items-center gap-1 text-[#1f1f1f] mb-6">
                      {Array.from({ length: item.rating || 5 }).map((_, sIdx) => (
                        <Star key={sIdx} className="h-5 w-5 fill-[#FFED00] stroke-[#1f1f1f]" />
                      ))}
                    </div>
                    <p className="text-sm text-[#333333] leading-relaxed font-medium">
                      "{item.content}"
                    </p>
                  </div>

                  <div className="mt-8 pt-6 border-t-2 border-[#e0e0e0]">
                    <div className="font-black uppercase text-[#1f1f1f] text-xs tracking-wider">
                      {item.author}
                    </div>
                    {item.location && (
                      <div className="text-xs text-[#666666] mt-0.5 font-medium">
                        {item.location}
                      </div>
                    )}
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        )}
      </div>
    </section>
  )
}