import React from "react";
import test from "../../assets/images/product/1.png";
import Navbar from "src/components/NavBar";
import Image from "next/image";
const Product = ({ data }) => {
  const testDataCk =
    '<h1 style="color:#ff6347;">Hydrating Cream - Ultimate Skincare Solution</h1><p style="color:#4682b4;">Discover the power of deep hydration with our <strong>premium Hydrating Cream</strong>. Designed to nourish and protect your skin, this cream is enriched with essential vitamins and natural extracts.</p><h2 style="color:#32cd32;">Why Choose Our Hydrating Cream?</h2><p style="color:#8a2be2;">Our formula ensures your skin remains <em>moisturized</em> and <em>rejuvenated</em> throughout the day. It absorbs quickly and leaves no greasy residue, making it perfect for all skin types.</p><ul><li style="color:#ff4500;"><strong>Deep Moisturization</strong> - Keeps your skin hydrated for 24 hours.</li><li style="color:#00ced1;"><strong>Natural Ingredients</strong> - Aloe vera, shea butter, and vitamin E.</li><li style="color:#daa520;"><strong>Non-Greasy Formula</strong> - Lightweight and easy to apply.</li><li style="color:#dc143c;"><strong>Suitable for All Skin Types</strong> - Works for dry, oily, and combination skin.</li></ul><h2 style="color:#ff69b4;">Key Benefits</h2><p style="color:#2e8b57;">✔ Restores skins natural glow<br>✔ Prevents dryness and flakiness<br>✔ Reduces fine lines and wrinkles<br>✔ Soothes irritation and redness</p><h2 style="color:#1e90ff;">How to Use?</h2><p style="color:#8b0000;">Apply a small amount of Hydrating Cream to your face and neck. Gently massage in circular motions until fully absorbed. Use morning and night for best results.</p><h2 style="color:#ff8c00;">Ingredients</h2><p style="color:#4b0082;">Water, Glycerin, Aloe Vera Extract, Shea Butter, Vitamin E, Hyaluronic Acid, Essential Oils, Antioxidants.</p><h2 style="color:#ff0000;">Customer Reviews</h2><p style="color:#006400;"><strong>⭐⭐⭐⭐⭐</strong> "Absolutely love this cream! My skin feels so soft and refreshed!" - Sarah K.</p><p style="color:#8b4513;"><strong>⭐⭐⭐⭐⭐</strong> "Best moisturizer I’ve ever used. Highly recommended!" - David R.</p><h2 style="color:#800080;">Frequently Asked Questions</h2><p style="color:#191970;"><strong>Q: Is this suitable for sensitive skin?</strong> <br>A: Yes! Our formula is dermatologically tested and safe for sensitive skin.</p><p style="color:#a52a2a;"><strong>Q: Can I use this under makeup?</strong> <br>A: Absolutely! It creates a perfect base for smooth makeup application.</p><h2 style="color:#ff1493;">Final Thoughts</h2><p style="color:#008b8b;">Hydrating Cream is your go-to solution for lasting hydration and healthy skin. Experience the difference with our expertly crafted formula. </p><p style="color:#cd5c5c;"><strong>Get yours today and say hello to beautifully hydrated skin!</strong></p>';

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

      <div className="flex flex-col md:flex-row  lg:px-20 ">
        <div className="lg:col-span-3 ">
          <div className="w-full rounded-3xl">
            <div className="flex justify-center xs:pb-[10px]  ">
              <div className="w-[500px]">
                <Image
                  src={test}
                  width={350}
                  height={350}
                  className=" mx-auto !object-cover"
                  alt={data.persianName}
                  priority
                  loading="eager"
                />
              </div>
            </div>
          </div>
        </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>
        </div>
      </div>
      <div className="xs:px-5 lg:px-20 pb-20">
        <div dangerouslySetInnerHTML={{ __html: testDataCk }} />
      </div>
    </>
  );
};

export default Product;