"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { IoIosArrowBack } from "react-icons/io";
import { IoIosArrowForward } from "react-icons/io";

type Slide = {
  title: string;
  subtitle: string;
  imageUrl: string;
};

type SliderProps = {
  slides: Slide[];
};

const Slider: React.FC<SliderProps> = ({ slides }) => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
  };

  return (
    <div className="relative space-y-10 lg:space-y-0">
      <div className="lg:w-10/12 mx-auto h-[60vh] md:h-[75vh] lg:h-[60vh] bg-white/60 lg:bg-transparent py-5 md:py-16 lg:py-0 grid px-5 lg:px-0 lg:grid-cols-5 gap-4">
        {/* Left Column (Title and Subtitle) */}
        <motion.div
          key={currentSlide}
          initial={{ opacity: 0, x: -100 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="col-span-2 justify-center flex flex-col space-y-10"
        >
          <motion.h2
            initial={{ y: -10 }}
            animate={{ y: 0 }}
            transition={{ duration: 2 }}
            className="xl:text-8xl md:text-7xl text-5xl text-colour-2 font-bold mb-2 custom-oswald"
          >
            {slides[currentSlide].title}
          </motion.h2>
          <motion.p
            initial={{ y: -20 }}
            animate={{ y: 0 }}
            transition={{ duration: 2, delay: 1, bounce: 30, type: "spring" }}
            className="text-lg w-2/3 text-gray-600"
          >
            {slides[currentSlide].subtitle}
          </motion.p>
        </motion.div>

        {/* Right Column (Slider Images) */}
        <motion.div
          initial={{ opacity: 0, x: 100 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
          className="col-span-3 hidden lg:block relative"
        >
          <motion.img
            key={currentSlide}
            initial={{ x: 100 }}
            animate={{ x: 20 }}
            transition={{ duration: 0.9 }}
            src={slides[currentSlide].imageUrl}
            alt={slides[currentSlide].title}
            className="w-full object-cover h-[70vh]  shadow-md"
          />
        </motion.div>
      </div>

      {/* Navigation Buttons */}
      <button
        onClick={prevSlide}
        className="absolute hidden md:block lg:top-1/2 top-full left-0 transform lg:-translate-y-1/2 bg-colour-1 text-white p-7  shadow-md z-10"
      >
        <IoIosArrowBack />
      </button>
      <button
        onClick={nextSlide}
        className="absolute lg:top-1/2 hidden md:block top-full right-0 transform lg:-translate-y-1/2 bg-white p-7 shadow-md z-10"
      >
        <IoIosArrowForward />
      </button>
    </div>
  );
};

export default Slider;