"use client";
import React, { useState } from "react";
import { ChevronRight } from "lucide-react";
import Image from "next/image";

const PremiumBannerLast = ({ data, services }) => {
  const { header5 } = data || {};
  const [selectedService, setSelectedService] = useState(0);

  const handleServiceClick = (index) => {
    setSelectedService(index);
  };

  return (
    <div className="min-h-screen bg-slate-50 p-4">
      <h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
        {header5 ?? "Perks of Consulting an Expert"}
      </h1>
      <div className="grid sm:grid-cols-3 gap-8">
        <div className="flex flex-col gap-4 sm:pl-10">
          {services.map((service, index) => (
            <div
              key={index}
              className="cursor-pointer"
              onClick={() => handleServiceClick(index)}
            >
              <h2
                className={`text-xl ${
                  selectedService === index ? "text-yellow-700" : ""
                } hover:translate-x-4 hover:font-semibold hover:text-yellow-700 transition-all flex items-center`}
              >
                {selectedService === index ? (
                  <ChevronRight className="mr-2" size={20} />
                ) : (
                  ""
                )}
                {service.title}
              </h2>
            </div>
          ))}
        </div>
        <div className="sm:col-span-2">
          {selectedService !== null && (
            <div className="bg-white p-6">
              <div className="flex flex-col-reverse sm:flex-row gap-6">
                <div className="flex flex-col gap-3 justify-start items-start sm:w-1/2">
                  <p className="mb-4 mt-2 text-[1.05rem]">
                    {services[selectedService].description}
                  </p>
                  {/* <a href="#form">
                    <button className="px-5 font-semibold text-white bg-[#C19A5B] py-4">
                      Book now
                    </button>
                  </a> */}
                </div>
                <div className="flex  gap-4 sm:w-1/2">
                  {services[selectedService].imageUrl.map((url, index) => (
                    <Image
                      key={index}
                      src={url}
                      alt={`${services[selectedService].title} - ${index + 1}`}
                      width={230}
                      height={350}
                      className="sm:w-[230px] sm:h-[350px] w-[130px] h-[250px] object-cover"
                    />
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default PremiumBannerLast;