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>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-0 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>
          <p className="font-bold text-2xl py-8">

           ${data.cost.toLocaleString()}
          </p>
          <button className="btn btn-primary px-20 text-base  ">
            {" "}
            Contact and consultation
          </button>
        </div>
      </div>
      <div className="xs:px-5 lg:px-20 py-16">
        <table className="w-full text-left border-collapse lg:px-20">
          <thead>
            <tr className="bg-gray-200">
              <th className="p-2 border-b">Property</th>
              <th className="p-2 border-b">Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-2 border-b">Brand</td>
              <td className="p-2 border-b">Nature's Essence</td>
            </tr>
            <tr>
              <td className="p-2 border-b">Volume</td>
              <td className="p-2 border-b">250ml</td>
            </tr>
            <tr>
              <td className="p-2 border-b">Ingredients</td>
              <td className="p-2 border-b">
                <ul className="list-disc pl-4">
                  <li>Aloe Vera</li>
                  <li>Chamomile</li>
                  <li>Tea Tree Oil</li>
                  <li>Rosemary Extract</li>
                </ul>
              </td>
            </tr>
           
            <tr>
              <td className="p-2 border-b">Category</td>
              <td className="p-2 border-b">Hair Care</td>
            </tr>
            <tr>
              <td className="p-2 border-b">For Hair Type</td>
              <td className="p-2 border-b">All Hair Types</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div className="xs:px-5 lg:px-20 pb-20 ">
        <div className="content" dangerouslySetInnerHTML={{ __html: testDataCk }} />
      </div>

      <Footer />
    </>
  );
};

export default Product;