import React from "react";
import test from "../../assets/images/product/1.png";
import Navbar from "src/components/NavBar";
import Image from "next/image";
import GalleryBox from "src/components/GalleryBox";
import Footer from "../Landing/components/Footer";

const Product = ({ data }) => {
  const testDataCk =
    "<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul><li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li><li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li><li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li><li><strong>Dermatologically Tested:</strong> Safe for all skin types</li><li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Product Specifications</h2><table border='1' cellpadding='10' cellspacing='0' style='width:100%;border-collapse:collapse;'><tr><th>Attribute</th><th>Details</th></tr><tr><td>Product Name</td><td>Hydrating Cream</td></tr><tr><td>Brand</td><td>Premium Skincare</td></tr><tr><td>Volume</td><td>50ml</td></tr><tr><td>Skin Type</td><td>All Skin Types</td></tr><tr><td>Key Ingredients</td><td>Aloe Vera, Vitamin E, Hyaluronic Acid</td></tr><tr><td>Fragrance</td><td>Fragrance-Free</td></tr><tr><td>Texture</td><td>Lightweight & Creamy</td></tr><tr><td>Usage</td><td>Apply twice daily on clean skin</td></tr><tr><td>Packaging</td><td>Eco-friendly Glass Jar</td></tr><tr><td>Shelf Life</td><td>24 Months</td></tr><tr><td>Made In</td><td>USA</td></tr></table><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote><p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul><li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li><li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li><li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";

  return (
    <>
      <Navbar theme={1} />

      <div className="flex flex-col md:flex-row  lg:px-20 ">
        <div className="lg:col-span-3 ">
          <GalleryBox />
        </div>

        <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
          <div className="text-left mt-7">
            <h1 className="text-lg font-medium ">{data.englishName} </h1>
            <p className="mb-0 text-sm text-gray-400">{data.englishName} </p>
          </div>

          <div className="flex my-4">
            <div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
              <p className="mb-0 text-sm text-white ">orginal </p>
            </div>

            <div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
              <p className="mb-0 text-sm text-white ">off today </p>
            </div>

            <div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
              <p className="mb-0 text-sm text-white ">no stock</p>
            </div>
          </div>

          <div>
            <div className="flex justify-between mt-3 text-left">
              <h2 className="mb-0 text-sm text-gray-400">
                {data?.description}
              </h2>
            </div>
          </div>

          <button className="btn btn-primary px-20 text-base mt-10 ">
            {" "}
            See All Products
          </button>
        </div>
      </div>
      <div className="xs:px-5 lg:px-20 pb-20">
        <div dangerouslySetInnerHTML={{ __html: testDataCk }} />
      </div>

      <Footer />
    </>
  );
};

export default Product;