"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { Star } from "lucide-react";

export default function ProductDetailPage() {
  const handleAddToCart = () => {
    alert("Product added to cart!");
  };

  const handleBuyNow = () => {
    alert("Proceeding to checkout!");
  };

  const handleSizeChange = (value: string) => {
    console.log("Selected size:", value);
  };

  const handleColorChange = (value: string) => {
    console.log("Selected color:", value);
  };

  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="floatingGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "About", id: "#about" },
              { name: "Services", id: "#services" },
              { name: "Product", id: "/product/1" },
              { name: "Team", id: "#team" },
              { name: "Testimonials", id: "#testimonials" },
              { name: "FAQ", id: "#faq" },
              { name: "Contact", id: "#contact" }
            ]}
            brandName="FCplus Center"
          />
        </div>

        <div id="product-detail" data-section="product-detail">
          <ProductDetailCard
            layout="page"
            name="Classic Blue Suit"
            price="$599.00"
            description="Elegantly crafted from premium Italian wool, this classic blue suit offers a timeless silhouette and unparalleled comfort. Perfect for business, formal events, or any occasion requiring a sharp, sophisticated look. Features a two-button closure, notched lapels, and flat-front trousers."
            showRating={true}
            rating={4.5}
            ratingIcon={Star}
            images={[
              { src: "http://img.b2bpic.net/free-photo/stylish-man-in-blue-suit_1303-10022.jpg", alt: "Classic Blue Suit front view" },
              { src: "http://img.b2bpic.net/free-photo/handsome-elegant-young-man-with-braces-posing_158595-5026.jpg", alt: "Man in suit close-up" },
              { src: "http://img.b2bpic.net/free-photo/man-fitting-suit-store_107420-101416.jpg", alt: "Man fitting suit in store" },
              { src: "http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg", alt: "Blue suit fabric detail" }
            ]}
            variants={[
              {
                label: "Size",                options: ["38S", "40S", "40R", "42R", "42L", "44L"],
                selected: "40R",                onChange: handleSizeChange
              },
              {
                label: "Color",                options: ["Blue", "Charcoal", "Black"],
                selected: "Blue",                onChange: handleColorChange
              }
            ]}
            quantity={{
                label: "Quantity",                options: ["1", "2", "3", "4", "5"],
                selected: "1",                onChange: (value) => console.log("Selected quantity:", value)
            }}
            buttons={[
              { text: "Add to Cart", onClick: handleAddToCart },
              { text: "Buy Now", onClick: handleBuyNow }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}