import React from "react";
import { useParams, useNavigate } from "react-router-dom";
import { productList } from "./productsData";
import "../styles/Product.css";

export default function ProductDetailPage() {
  const { productName } = useParams();
  const navigate = useNavigate();

  // Decode the product name from URL
  const decodedName = decodeURIComponent(productName);

  // Find the product in the list
  const product = productList.find((p) => p.name === decodedName);

  if (!product) {
    return (
      <div className="not-found">
        <h2>Product not found</h2>
        <button className="back-btn" onClick={() => navigate(-1)}>
          ⬅ Go Back
        </button>
      </div>
    );
  }

  return (
    <section className="product-detail-page">
      <button className="back-btn" onClick={() => navigate(-1)}>
        <span className="back-arrow">⬅</span> Back to Products
      </button>

      <div className="detail-container">
        {/* Left Image */}
        <div className="detail-image-box">
          <img src={product.image} alt={product.name} />
        </div>

        {/* Right Content */}
        <div className="detail-content">
          <h2>{product.name}</h2>
          <div dangerouslySetInnerHTML={{ __html: product.description }} />
      {/* Future extra info (like price, pack size, etc.) */}
        </div>
      </div>
    </section>
  );
}
