"use client"; import { useState } from "react"; import Image from "next/image"; import { motion } from "framer-motion"; import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce"; import { useCartStore } from "@/stores/cartStore"; import ProductCard from "@/components/product/ProductCard"; interface ProductDetailProps { product: WooProduct; relatedProducts: WooProduct[]; } export default function ProductDetail({ product, relatedProducts }: ProductDetailProps) { const [selectedImage, setSelectedImage] = useState(0); const [quantity, setQuantity] = useState(1); const [activeTab, setActiveTab] = useState<"details" | "ingredients" | "usage">("details"); const addItem = useCartStore((state) => state.addItem); const images = product.images?.length > 0 ? product.images : [{ id: 0, src: "/placeholder-product.jpg", alt: product.name }]; const handleAddToCart = () => { addItem({ id: product.id, name: product.name, price: product.price || product.regular_price, quantity, image: images[0]?.src || "", sku: product.sku || "", }); }; const stripHtml = (html: string) => { return html.replace(/<[^>]*>/g, ""); }; return ( <>
{images[selectedImage] && ( {images[selectedImage].alt )}
{images.length > 1 && (
{images.map((image, index) => ( ))}
)}

{product.name}

{product.price ? formatPrice(product.price) : "Contact for price"}

{stripHtml(product.short_description || product.description.slice(0, 200))}

{product.stock_status === "instock" ? (
{quantity}
) : (
Out of Stock
)}
{(["details", "ingredients", "usage"] as const).map((tab) => ( ))}
{activeTab === "details" && (

{stripHtml(product.description)}

)} {activeTab === "ingredients" && (

Natural ingredients - Contact for detailed information.

)} {activeTab === "usage" && (

Apply to clean skin or hair. Use daily for best results.

)}
{relatedProducts.length > 0 && (

You May Also Like

{relatedProducts.map((product, index) => ( ))}
)} ); }