'use client';

import { useEffect, useCallback, useRef } from 'react';
import { ChevronRight } from 'lucide-react';
import { SectionHeader } from './SectionHeader';
import { RecipeCard } from './RecipeCard';
import { RECIPES } from '../../recipes/data';
import Image from 'next/image';

export default function RecipeSection() {
  const sliderRef = useRef<HTMLDivElement>(null);

  const scrollRecipeLeft = useCallback(() => {
    const slider = sliderRef.current;
    if (slider)
      slider.scrollBy({ left: -slider.offsetWidth, behavior: 'smooth' });
  }, []);

  const scrollRecipeRight = useCallback(() => {
    const slider = sliderRef.current;
    if (slider)
      slider.scrollBy({ left: slider.offsetWidth, behavior: 'smooth' });
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      const slider = sliderRef.current;
      if (slider) {
        if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
          slider.scrollTo({ left: 0, behavior: 'smooth' });
        } else {
          slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
        }
      }
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <section className="py-8 md:py-24 bg-transparent relative overflow-hidden z-10">
      {/* Background for top 3/4 */}
      <div className="absolute top-0 left-0 w-full h-[75%] bg-[#FFFDF5] z-0"></div>

      {/* Wavy transition from white to patterned yellow */}
      <div className="absolute top-[75%] left-0 w-full z-0 -translate-y-px">
        <svg
          viewBox="0 0 1440 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-[30px] sm:h-[50px] md:h-[90px] text-[#FFFDF5] rotate-180"
          preserveAspectRatio="none"
        >
          <path
            d="M0 45.4545C240 -15.1515 480 -15.1515 720 45.4545C960 106.061 1200 106.061 1440 45.4545V90H0V45.4545Z"
            fill="currentColor"
          />
        </svg>
      </div>

      <div className="container mx-auto px-4 relative z-20">
        <div className="mx-auto flex justify-center flex-col items-center w-full">
          <Image
            src={'/images/home/resep-logo.avif'}
            alt="logo resep"
            width={317}
            height={282}
            className="drop-shadow-sm w-[120px] sm:w-[180px] md:w-[240px] h-auto"
          />
        </div>
        <SectionHeader title="KREASI" accent="RASA" />
        <p className="text-center text-[#4A5565] text-sm sm:text-base md:text-xl max-w-3xl mx-auto mb-10 md:mb-14 tracking-[-0.31px]">
          Kreasi menu makanan yang bisa dicoba dirumah menggunakan garam
          berkualitas.
        </p>

        <div className="relative px-1">
          {/* Left arrow */}
          <div className="flex justify-center absolute -left-3 md:-left-8 top-1/2 -translate-y-1/2 z-20">
            <button
              onClick={scrollRecipeLeft}
              className="w-10 h-10 md:w-14 md:h-14 bg-white rounded-full flex items-center justify-center shadow-md border border-[#E8E0CC] hover:bg-[#FFF9E8] transition-colors"
              aria-label="Previous recipe"
            >
              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 rotate-180 text-[#D4A000]" />
            </button>
          </div>

          {/* Slider Container */}
          <div
            ref={sliderRef}
            className="flex gap-4 md:gap-9 items-stretch overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 -mb-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none"
          >
            {RECIPES.map((recipe, idx) => (
              <div
                key={recipe.id}
                className="w-[260px] sm:w-[320px] md:w-[calc(33.333%-1.5rem)] shrink-0 snap-center"
              >
                <RecipeCard recipe={recipe} index={idx} />
              </div>
            ))}
          </div>

          {/* Right arrow */}
          <div className="flex justify-center absolute -right-3 md:-right-8 top-1/2 -translate-y-1/2 z-20">
            <button
              onClick={scrollRecipeRight}
              className="w-10 h-10 md:w-14 md:h-14 bg-white rounded-full flex items-center justify-center shadow-md border border-[#E8E0CC] hover:bg-[#FFF9E8] transition-colors"
              aria-label="Next recipe"
            >
              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-[#D4A000]" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}