'use client'
import { useState } from "react";
import Link from "next/link";

export default function Fluid() {
    const images = [
        "/assets/images/menu-card/menu-1.webp",
        "/assets/images/menu-card/menu-2.webp",
        "/assets/images/menu-card/menu-3.webp",
        "/assets/images/menu-card/menu-4.webp"
    ];

    const [selectedImage, setSelectedImage] = useState(images[0]); // Set first image as default

    return (
        <>
            {/* Fluid Section Two */}
            <section className="fluid-section-two">
                {/* <div className="section-text">Recipe book</div> */}
                <div className="outer-container clearfix row m-0 d-flex align-items-center">

                    {/* Content Column */}
                    <div className="col-lg-6 content-column">
                        <div className="inner-column">
                            {/* Title Box */}
                            <div className="title-box">
                                <h2>Spice Up Your Screen!</h2>
                                <div className="text">
                                    Grab our exclusive *Spicy Kitchen* recipe book – packed with 10 fan-favorite dishes<br /> bursting with bold flavor. Try before you buy!
                                </div>
                            </div>
                            {/* Image List */}
                            <ul className="book-list d-flex justify-content-start align-items-center">
                                {images.map((img, idx) => (
                                    <li key={idx} style={{ cursor: "pointer" }} onClick={() => setSelectedImage(img)}>
                                        <img className="book-thumbnail" src={img} alt={`Book ${idx + 1}`}/>
                                    </li>
                                ))}
                            </ul>

                            {/* Button Box */}
                            <div className="button-box">
                                <Link href="/menu" className="theme-btn btn-style-one clearfix">
                                    <span className="icon"></span>View Menu
                                </Link>
                            </div>
                        </div>
                    </div>

                    {/* Image Column */}
                   <div className="col-lg-6 p-0">
                        <div className="w-100">
                            <img
                                src={selectedImage}
                                alt="Selected Book"
                                className="img-fluid "
                                style={{ width: "100%", height: "auto", objectFit: "cover" }}
                            />
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}