"use client"

import { useRef, useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface Testimonial {
  quote: string
  author: string
}

interface TestimonialsSectionProps {
  testimonials: Testimonial[]
}

export function TestimonialsSection({ testimonials }: TestimonialsSectionProps) {
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const [canScrollLeft, setCanScrollLeft] = useState(false)
  const [canScrollRight, setCanScrollRight] = useState(true)

  const checkScrollPosition = () => {
    if (!scrollContainerRef.current) return
    const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current
    setCanScrollLeft(scrollLeft > 0)
    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10)
  }

  useEffect(() => {
    checkScrollPosition()
    const container = scrollContainerRef.current
    if (container) {
      container.addEventListener("scroll", checkScrollPosition)
      return () => container.removeEventListener("scroll", checkScrollPosition)
    }
  }, [])

  const scroll = (direction: "left" | "right") => {
    if (!scrollContainerRef.current) return
    const scrollAmount = 400
    const newScrollLeft =
      scrollContainerRef.current.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount)
    scrollContainerRef.current.scrollTo({
      left: newScrollLeft,
      behavior: "smooth",
    })
  }

  return (
    <section className="max-w-6xl mx-auto ">
      <div className="max-w-7xl mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12 items-start">
          <div className="space-y-4">
            <div>
              <h2
                className="text-3xl lg:text-5xl font-bold leading-tight"
                style={{ color: "#0D8B4D" }}
              >
                What Our Guests Say
              </h2>
              <svg
                width={265}
                height={20}
                viewBox="0 0 365 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mt-2"
              >
                <path
                  d="M0.400391 11.6951C4.32889 12.7831 221.788 12.1485 330.026 11.6951L150.174 18.4951L364.4 1.49512"
                  stroke="#F5A524"
                  strokeWidth={3}
                />
              </svg>
            </div>
            <p className="text-sm text-gray-600 leading-relaxed max-w-lg">
              Our guests consistently share how much they enjoy their experiences with us, from the warm welcome and seamless service to the relaxing atmosphere that makes every stay memorable.
            </p>
          </div>

          <div className="relative">
            <style jsx>{`
              .hide-scrollbar::-webkit-scrollbar {
                display: none;
              }
            `}</style>
            <div
              ref={scrollContainerRef}
              className="hide-scrollbar flex gap-6 overflow-x-auto scroll-smooth pb-4"
              style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
            >
              {testimonials.map((testimonial, index) => (
                <div
                  key={index}
                  className="flex-shrink-0 w-[320px] bg-[#F5F5F0] rounded-xl p-6 space-y-4"
                >
                  <div className="text-5xl font-serif leading-none" style={{ color: "#F5A524" }}>
                    ❝❝
                  </div>
                  <p className="text-sm text-gray-800 leading-relaxed">
                    {testimonial.quote}
                  </p>
                  <p className="text-sm font-medium text-gray-600 italic">
                    {testimonial.author}
                  </p>
                </div>
              ))}
            </div>

            {/* Navigation Buttons */}
            <div className="flex justify-end gap-3 mt-6">
              <Button
                variant="outline"
                size="icon"
                onClick={() => scroll("left")}
                disabled={!canScrollLeft}
                className="rounded-full w-10 h-10 border-gray-300 hover:bg-gray-100 bg-white disabled:opacity-40"
                aria-label="Previous testimonial"
              >
                <ChevronLeft className="w-5 h-5 text-gray-600" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                onClick={() => scroll("right")}
                disabled={!canScrollRight}
                className="rounded-full w-10 h-10 border-gray-300 hover:bg-gray-100 bg-white disabled:opacity-40"
                aria-label="Next testimonial"
              >
                <ChevronRight className="w-5 h-5 text-gray-600" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}