import { useState } from "react";
import Button from "../components/Elements/Buttons";
import Navbar from "../components/Elements/Navbar";
import { FaShoppingBag } from 'react-icons/fa'; 
import Footer from "../components/Elements/Footer";
import { Carousel, IconButton  } from "@material-tailwind/react";
import { DiVim } from "react-icons/di";
import Pagination from "../components/Elements/Pagination";




const QuantitySelector = () => {
  const [quantity, setQuantity] = useState(1);

  const handleDecrease = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1);
    }
  };

  const handleIncrease = () => {
    setQuantity(quantity + 1);
  };

  return (
    <div className="flex justify-center gap-2 border border-black px-2 py-1 rounded-md text-black" style={{ display: 'flex', alignItems: 'center', maxWidth: '150px' }}>
      <button onClick={handleDecrease} style={{ fontSize: '24px' }}>−</button>
      <div style={{ margin: '0 15px', fontSize: '24px' }}>{quantity}</div>
      <button  onClick={handleIncrease} style={{ fontSize: '24px' }}>+</button>
    </div>
  );
};

const DetailProducts = () => {
  const [activeTab, setActiveTab] = useState("About");

  return (
    <>
      <div className="container grid">
        <Navbar name="DetailProducts" />
        <div className="grid lg:flex lg:justify-between m-3">
          <div className="flex justify-center lg:max-w-md lg:w-full">
            <img
              src="/image/tehtarik.png"
              alt="Savva Teh Tarik Caramel Flavour"
              className="w-full max-w-xs lg:max-w-lg"
            />
          </div>
           
          <div className="grid px-2 gap-3 lg:mr-5">
            <div className="flex justify-between">
              <div className="flex items-center justify-between w-full">
                <div className="max-w-[80%] lg:max-w-screen-md">
                  <p className="text-md lg:text-xl">HEALTH SUPPLEMENTS</p>
                  <h1 className="font-bold text-lg lg:text-2xl">
                    Savva Teh Tarik Caramel Flavour
                  </h1>
                </div>
              </div>
            </div>
            <div className="max-w-full lg:max-w-screen-md xl:max-w-screen-lg">
              <p className="text-md lg:text-md whitespace-normal">
                1 Box Savva Teh Tarik Caramel Flavour (20g x 15 sachets)
              </p>
            </div>
           
         <div style={{ display: 'flex' }}>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <p className="rating font-bold mt-2">5.0</p>     
        </div>
  

            <div className="flex flex-col lg:flex-row lg:justify-between space-y-1 lg:space-y-0">
              <div className="flex flex-col">
                <h1 className="font-bold text-xl xl:text-2xl text-[#AFA0D7]">
                  $12.00 USD
                </h1>
                <h1 className="font text-xl text-[#C4C3C3] line-through">
                  $14.00 USD
                </h1>
              </div>
            </div>
            
            <QuantitySelector />
             
            <div className="flex gap-2 mt-2 lg:mt-0">
               <button className="flex items-center justify-center gap-2 border border-black px-4 py-2 rounded-md text-black">
               <FaShoppingBag className="text-purple-400" />
               <span>ADD TO CHART</span>
               </button>
             <Button className="text-white px-4 py-2">Buy Now</Button>
            </div>
          </div>
        </div>

        <Carousel
                        className="rounded-xl max-h-[50rem] max-w-full overflow-hidden "
                        prevArrow={({ handlePrev }) => (
                            <IconButton
                                variant="text"
                                color="black"
                                size="lg"
                                onClick={handlePrev}
                                className="!absolute top-2/4 left-4 -translate-y-2/4"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 25 25"
                                    strokeWidth={2}
                                    stroke="currentColor"
                                    className="h-6 w-6"
                                    
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
                                    />
                                </svg>
                            </IconButton>
                        )}
                        nextArrow={({ handleNext }) => (
                            <IconButton
                                variant="text"
                                color="black"
                                size="lg"
                                onClick={handleNext}
                                className="!absolute top-2/4 !right-4 -translate-y-2/4"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 25 25"
                                    strokeWidth={2}
                                    stroke="currentColor"
                                    className="h-6 w-6"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
                                    />
                                </svg>
                            </IconButton>
                        )}
                    >
                          <div className='w-[1440px] h-[720px] bg-[#ecdac2] relative z-[189] mt-[63px] mr-0 mb-0 ml-0'>
        <div className='w-[720px] h-[720px]  bg-cover bg-no-repeat absolute top-0 left-[720px] z-[190]' />
        <div className='w-[659px] h-[659px] bg-[#fff] absolute top-[30px] left-[58px] z-[193]'>
          <div className='flex w-[552px] h-[42px] justify-between items-center relative z-[202] mt-[42px] mr-0 mb-0 ml-[53px]'>
            <div className='flex w-[330px] h-[42px] justify-between items-center shrink-0 relative z-[202]'>
              <span className="flex w-[108px] h-[42px] justify-center items-center shrink-0 font-['Inter'] text-[35px] font-extrabold leading-[42px] text-[#afa0d7] relative text-center whitespace-nowrap z-[194]">
                <button>About</button>
              </span>
              <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[202]">
                <button>How to use</button>
              </span>    
            </div>  
            <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[200]">
              <button>Ingredients</button>
            </span> 
          </div>
          <div className="w-21 h-0.5 bg-black mx-auto my-4"></div>

          <span className="flex w-[601px] h-[270px] items-center font-['Inter'] text-[30px] font-normal leading-[30.256px] text-[#000] relative z-[196] mt-[32px] mr-0 mb-0 ml-[30px]">
            SAVVA is made with the finest ingredients, including Morosil™ and
            red dates. Our botanical drink is carefully crafted with these
            powerful ingredients to create a delicious and nutritious beverage
            that not only tastes great but also helps you maintain a healthy 
            lifestyle. Its potent and functional features, coupled with slimming
            properties, make it an ideal inclusion in your daily routine.
          </span>
          <div className="w-[598px] h-[60px] font-['Inter'] text-[25px] font-normal leading-[30.256px] relative z-[197] mt-[60px] mr-0 mb-0 ml-[30px]">
            <span className="font-['Inter'] text-[25px] font-medium leading-[30.256px] text-[#000] relative">
              DISCLAIMER :
            </span>
            <span className="font-['Inter'] text-[25px] font-normal leading-[30.256px] text-[#000] relative">
              
              This product is not intended to diagnose, treat, cure or prevent
              any disease.
            </span>
          </div>
        </div>
        <div className='flex h-[720px] bg-[url(../public/image/savvacaramel.png)] bg-cover bg-no-repeat relative mt-[-1px] mr-0 mb-0 ml-[720px] ' />
    </div>

    <div className='w-[1440px] h-[720px] bg-[#F4EED4] relative z-[189] mt-[63px] mr-0 mb-0 ml-0'>
        <div className='w-[720px] h-[720px]  bg-cover bg-no-repeat absolute top-0 left-[720px] z-[190]' />
        <div className='w-[659px] h-[659px] bg-[#fff] absolute top-[30px] left-[58px] z-[193]'>
          <div className='flex w-[552px] h-[42px] justify-between items-center relative z-[202] mt-[42px] mr-0 mb-0 ml-[53px]'>
            <div className='flex w-[330px] h-[42px] justify-between items-center shrink-0 relative z-[202]'>
            <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[200]">
                <button>About</button>
              </span>
              <span className="flex w-[108px] h-[42px] justify-center items-center shrink-0 font-['Inter'] text-[35px] font-extrabold leading-[42px] text-[#afa0d7] relative text-center whitespace-nowrap z-[194]">
                <button>How to use</button>
              </span>
            </div>
            <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[200]">
              <button>Ingredients</button>
            </span> 
          </div>
          <div className="w-21 h-0.5 bg-black mx-auto my-4"></div>

          <span className="flex w-[601px] h-[350px] items-center font-['Inter'] text-[30px] font-normal leading-[30.256px] text-[#000] relative z-[196] mt-[32px] mr-0 mb-0 ml-[30px]">
          Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus.
          </span>
        </div>
        <div className='flex h-[720px] bg-[url(../public/image/savvakurmamerah.png)] bg-cover bg-no-repeat relative mt-[-1px] mr-0 mb-0 ml-[720px] ' />
    </div>

<div className='w-[1440px] h-[720px] bg-[#FFECD3] relative z-[189] mt-[63px] mr-0 mb-0 ml-0'>
        <div className='w-[720px] h-[720px]  bg-cover bg-no-repeat absolute top-0 left-[720px] z-[190]' />
        <div  className='w-[659px] h-[659px] bg-[#fff] absolute top-[30px] left-[58px] z-[193]'>
          <div className='flex w-[552px] h-[42px] justify-between items-center relative z-[202] mt-[42px] mr-0 mb-0 ml-[53px]'>
            <div className='flex w-[330px] h-[42px] justify-between items-center shrink-0 relative z-[202]'>
            <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[202]">
                <button>About</button>
              </span>
              <span className="flex w-[162px] h-[36px] justify-center items-center shrink-0 font-['Inter'] text-[30px] font-medium leading-[36px] text-[#808080] relative text-center whitespace-nowrap z-[202]">
                <button>How to use</button>
              </span>
            </div>
            <span className="flex w-[108px] h-[42px] justify-center items-center shrink-0 font-['Inter'] text-[35px] font-extrabold leading-[42px] text-[#afa0d7] relative text-center whitespace-nowrap z-[194]">
              <button>Ingredients</button>
            </span> 
          </div>
          <div className="w-21 h-0.5 bg-black mx-auto my-4"></div>

          <span className="flex w-[601px] h-[350px] items-center font-['Inter'] text-[30px] font-normal leading-[30.256px] text-[#000] relative z-[196] mt-[32px] mr-0 mb-0 ml-[30px]">
          Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus.
          </span>
        </div>
        <div className='flex h-[720px] bg-[url(../public/image/savvamanisnya.png)] bg-cover bg-no-repeat relative mt-[-1px] mr-0 mb-0 ml-[720px] ' />
    </div>
                    </Carousel>


    
          <div className="text-center mt-10">
          <div class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6 ">
            <h2 className="text-xl lg:text-2xl font-bold">Related Products</h2>
            <div className="w-15 h-1 bg-black mx-auto my-4"></div>
            <div className="product-list flex gap-4 justify-center">
              <div className="product-card border p-2 rounded">
                <img
                  src="/image/tehtarik.png"
                  alt="tehtarik"
                  className="w-full h-auto"
                />
                <div className="product-rating">
                <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
          <p className="rating font-bold mt-2">5.0</p>
        </div>
                <p className="product-name font-bold mt-2">
                  Sarwa Teh Tarik Flavour
                </p>
                <p className="price font-bold mt-2">$9.99 USD</p>
              </div>
              <div className="product-card border p-2 rounded">
                <img
                  src="/image/tehtarik.png"
                  alt="tehtarik"
                  className="w-full h-auto"
                />
                <div className="product-rating">
                <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
          <p className="rating font-bold mt-2">5.0</p>
        </div>
                <p className="product-name font-bold mt-2">
                  Sarwa Teh Tarik Original
                </p>
                <p className="price font-bold mt-2">$9.99 USD</p>
              </div>
              <div className="product-card border p-2 rounded">
                <img
                  src="/image/tehtarik.png"
                  alt="tehtarik"
                  className="w-full h-auto"
                />
                <div className="product-rating">
                <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '24px', color: 'gold' }}>★</span>
          <p className="rating font-bold mt-2">5.0</p>
        </div>
                <p className="product-name font-bold mt-2">
                  Sarwa Teh Tarik Classic
                </p>
                <p className="price font-bold mt-2">$9.99 USD</p>
              </div>
            </div>
            </div>
          </div>

          <div className='w-[1341px] h-[382px] bg-[url(../assets/images/66db94ef-8e4a-4e04-b56e-3985b935b020.png)] bg-cover bg-no-repeat relative z-[100] mt-[115px] mr-0 mb-0 ml-[47px]'>
          <div class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6 ">
        <div className='flex w-[1171px] h-[39px] justify-between items-center relative z-[125] mt-[38px] mr-0 mb-0 ml-[79px]'>
          <span className="flex w-[294px] h-[39px] items-center shrink-0 font-['Poppins'] text-[26px] font-semibold leading-[39px] text-[#000] relative whitespace-nowrap z-[121]">
            AVERAGE USER RATING
          </span>
          <span className="h-[35px] shrink-0 font-['Poppins'] text-[23px] font-semibold leading-[34.5px] text-[#000] relative text-left whitespace-nowrap z-[125]">
            HAVE YOU TRIED THIS PRODUCT?
          </span>
        </div>
        <div className='w-[1112px] h-[72px] relative z-[124] mt-[19px] mr-0 mb-0 ml-[78px]'>
          <div className="w-[309px] h-[55px] font-['Poppins'] text-[18px] font-normal leading-[27px] absolute top-0 left-[803px] text-left whitespace-nowrap z-[124]">
            <span className="font-['Poppins'] text-[16px] font-normal leading-[27px] text-[#000] relative text-left">
              Satisfied with the product you bought?
              <br />
            </span>
            <span className="font-['Poppins'] text-[19px] font-semibold leading-[27px] text-[#000] relative text-left">
              Share your review
            </span>
          </div>
          <div style={{ display: 'flex' }}>
            <span style={{ fontSize: '50px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '50px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '50px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '50px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '50px', color: 'gold' }}>★</span>
          <span className="flex h-[66px] justify-start items-start font-['Poppins'] text-[35px] font-semibold leading-[66px] text-[#000] absolute top-[6px] left-[210px] text-left whitespace-nowrap z-[114]">
            5.0
          </span>
          </div>
          <div className='w-[4.67%] h-[72.17%] bg-[url(../assets/images/638ae02b-9945-43e8-a2c9-0b0cfef577b7.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[18.06%] left-[5.55%] z-[117]' />
          <div className='w-[4.67%] h-[72.17%] bg-[url(../assets/images/28705413-edb0-43ed-b1ee-4b4d65463beb.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[18.06%] left-[11.1%] z-[118]' />
          <div className='w-[4.67%] h-[72.17%] bg-[url(../assets/images/26ef8760-4437-47b6-84a2-be5bc15984a6.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[18.06%] left-[16.65%] z-[119]' />
          <div className='w-[4.67%] h-[72.17%] bg-[url(../assets/images/710cfb5c-a08a-45b6-a441-32fff7b34c85.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[18.06%] left-[22.2%] z-[120]' />
          <div className='w-[4.67%] h-[72.17%] bg-[url(../assets/images/d9778650-2e65-43e7-9f0a-41c596fa9b31.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[18.06%] left-0 z-[116]' />
        </div>
        <div className='w-[1189px] h-[70px] relative z-[127] mt-[6px] mr-0 mb-0 ml-[79px]'>
          <div className='w-[387px] h-[45px] bg-[#000] rounded-[6px] border-solid border border-[#000] absolute top-0 left-[802px] z-[127]'>
            <span className="flex h-[33px] justify-start items-start font-['Poppins'] text-[22px] font-semibold leading-[33px] text-[#fff] absolute top-[5px] left-[125px] text-left whitespace-nowrap z-[128]">
              ADD REVIEW
            </span>
          </div>
          <span className="flex w-[421px] h-[58px] justify-start items-start font-['Poppins'] text-[19px] font-normal leading-[28.5px] text-[#000] absolute top-[12px] left-0 text-left z-[122]">
            100 of 101 reviewers recommend this product
            <br />
          </span>
        </div>
        <div className='w-[762px] h-[59px] bg-[rgba(226,215,255,0.68)] rounded-[7px] relative z-[102] mt-[31px] mr-0 mb-0 ml-[78px]'>
          <div className='w-[34px] h-[34px] bg-[url(../assets/images/3e5cc59a24ee3ed5afdf911709b19216f52fa6a1.png)] bg-cover bg-no-repeat absolute top-[12px] left-[51px] z-[105]' />
          <div className='w-[34px] h-[34px] bg-[url(../assets/images/2c6c9bcc93c3e2cb01a182c00625c37819f76902.png)] bg-cover bg-no-repeat absolute top-[12px] left-[449px] z-[108]' />
          <div className="w-[227px] h-[29px] font-['Poppins'] text-[19px] font-normal leading-[28.5px] absolute top-[15px] left-[100px] text-left whitespace-nowrap z-[106]">
            <span className="font-['Poppins'] text-[19px] font-semibold leading-[28.5px] text-[#000] relative text-left">
              100% 
            </span>
            <span className="font-['Poppins'] text-[19px] font-normal leading-[28.5px] text-[#000] relative text-left">
              users recommend
            </span>
          </div>
          <div className="w-[210px] h-[29px] font-['Poppins'] text-[19px] font-normal leading-[28.5px] absolute top-[16px] left-[500px] text-left whitespace-nowrap z-[109]">
            <span className="font-['Poppins'] text-[19px] font-semibold leading-[28.5px] text-[#000] relative text-left">
              99%
            </span>
            <span className="font-['Poppins'] text-[19px] font-normal leading-[28.5px] text-[#000] relative text-left">
               users repurchase
            </span>
          </div>
          <div className='w-px h-[28.5px] bg-[url(../assets/images/9a248648-c6ac-4344-be96-23f77ff14374.png)] bg-cover bg-no-repeat absolute top-[15.5px] left-[390.5px] z-[103]' />
        </div>
      </div>
      </div>

      <div className='w-[1341px] h-[1186px]  text-[0px]  relative z-[95] mt-[102px] mr-0 mb-0 ml-[47px]'>
      <div class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6 ">
        <span className="flex w-[287px] h-[57px] items-center font-['Poppins'] text-[38px] font-semibold leading-[57px] text-[#000] relative whitespace-nowrap z-[98] mt-[29px] mr-0 mb-0 ml-[22px]">
          Product Rating
        </span>
        <span className="flex w-[125px] h-[30px] items-center font-['Poppins'] text-[20px] font-normal leading-[30px] text-[#000] relative whitespace-nowrap z-[97] mt-[8px] mr-0 mb-0 ml-[22px]">
          User reviews
        </span>
        <div className='w-[1250px] h-[388px] bg-[#f3f1fa] relative z-[152] mt-[36px] mr-0 mb-0 ml-[20px]'>
          <div className='w-[304px] h-[100px] relative z-[165] mt-[32px] mr-0 mb-0 ml-[34px]'>
            <div className='w-[100px] h-[100px] bg-[url(../public/image/catprofile.png)] bg-cover bg-no-repeat rounded-[50%] absolute top-0 left-0 z-[153]' />
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-medium leading-[27px] text-[#000] absolute top-0 left-[142px] text-left whitespace-nowrap z-[155]">
              Rachel derek
            </span>
            <div style={{ display: 'flex' }}>
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-medium leading-[90px] text-[#000] absolute top-0 left-[142px] text-left whitespace-nowrap z-[155]"> 
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            </span>
          <span className="flex h-[66px] justify-start items-start font-['Poppins'] text-[20px] font-semibold leading-[80px] text-[#000] absolute top-[6px] left-[280px] text-left whitespace-nowrap z-[114]">
            5.0
          </span>
          </div>
            <div className='w-[6.18%] h-[18.78%] bg-[url(../assets/images/85af0353-0c98-4476-8f76-d6666d51e548.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[31%] left-[54.05%] z-[161]' />
            <div className='w-[6.18%] h-[18.78%] bg-[url(../assets/images/cf7dbc08-f1c1-4f8e-ad89-9579320a4f5b.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[31%] left-[61.38%] z-[162]' />
            <div className='w-[6.18%] h-[18.78%] bg-[url(../assets/images/f1abe138-9526-4a1e-ae58-2a3c02addd48.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[31%] left-[68.72%] z-[163]' />
            <div className='w-[6.18%] h-[18.78%] bg-[url(../assets/images/7bbf9ac0-bd33-4094-8702-5421e7c0916e.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[31%] left-[76.06%] z-[164]' />
            <div className='w-[6.18%] h-[18.78%] bg-[url(../assets/images/d1a16ac3-cb1e-48ce-b7a9-b4888fa3a52e.png)] bg-[length:100%_100%] bg-no-repeat absolute top-[31%] left-[46.71%] z-[160]' />
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-normal leading-[27px] text-[#000] absolute top-[64px] left-[142px] text-left whitespace-nowrap z-[165]">
              2024-08-08 03:16
            </span>
          </div>
          <span className="flex w-[1009px] h-[123px] items-start font-['Poppins'] text-[27px] font-normal leading-[40.5px] text-[#000] relative z-[166] mt-[10px] mr-0 mb-0 ml-[176px]">
            It's fun because i'm getting used to being able to manage my
            cravings for unhealthy careless eating, even though my BB doesn't
            drop too significantly but my abdominal circumference is shrinking
          </span>
          <div className='w-[461px] h-[49px] relative z-[172] mt-[35px] mr-0 mb-0 ml-[181px]'>
            <button>
            <div className='w-[46px] h-[46px] bg-[url(../public/image/like.png)] bg-contain bg-no-repeat absolute top-0 left-0 z-[169]' />
            <div className='flex w-[148px] h-[49px] justify-between items-center absolute top-0 left-[313px] z-[172]'>
              <div className='w-[46px] h-[46px] shrink-0 bg-[url(../public/image/Share.png)] bg-contain bg-no-repeat relative z-[172]' />
              <span className="h-[44px] shrink-0 font-['Poppins'] text-[29px] font-normal leading-[43.5px] text-[#808080] relative text-left whitespace-nowrap z-[171]">
                Share
              </span>
            </div>
            <span className="flex h-[44px] justify-start items-start font-['Poppins'] text-[29px] font-normal leading-[43.5px] text-[#808080] absolute top-[3px] left-[65px] text-left whitespace-nowrap z-[168]">
              Helpful (29)
            </span>
            </button>
          </div>
        </div>
        <div className='w-[1250px] h-[388px] bg-[#f3f1fa] relative z-[152] mt-[36px] mr-0 mb-0 ml-[20px]'>
          <div className='w-[304px] h-[100px] relative z-[165] mt-[32px] mr-0 mb-0 ml-[34px]'>
            <div className='w-[100px] h-[100px] bg-[url(../public/image/catprofile.png)] bg-cover bg-no-repeat rounded-[50%] absolute top-0 left-0 z-[153]' />
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-medium leading-[27px] text-[#000] absolute top-0 left-[142px] text-left whitespace-nowrap z-[155]">
              Rachel derek
            </span>
            <div style={{ display: 'flex' }}>
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-medium leading-[90px] text-[#000] absolute top-0 left-[142px] text-left whitespace-nowrap z-[155]"> 
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            <span style={{ fontSize: '30px', color: 'gold' }}>★</span>
            </span>
          <span className="flex h-[66px] justify-start items-start font-['Poppins'] text-[20px] font-semibold leading-[80px] text-[#000] absolute top-[6px] left-[280px] text-left whitespace-nowrap z-[114]">
            5.0
          </span>
          </div>
            <span className="flex h-[27px] justify-start items-start font-['Poppins'] text-[18px] font-normal leading-[27px] text-[#000] absolute top-[64px] left-[142px] text-left whitespace-nowrap z-[165]">
              2024-08-08 03:16
            </span>
          </div>
          <span className="flex w-[1009px] h-[123px] items-start font-['Poppins'] text-[27px] font-normal leading-[40.5px] text-[#000] relative z-[166] mt-[10px] mr-0 mb-0 ml-[176px]">
            It's fun because i'm getting used to being able to manage my
            cravings for unhealthy careless eating, even though my BB doesn't
            drop too significantly but my abdominal circumference is shrinking
          </span>
          <div className='w-[461px] h-[49px] relative z-[172] mt-[35px] mr-0 mb-0 ml-[181px]'>
            <button>
            <div className='w-[46px] h-[46px] bg-[url(../public/image/like.png)] bg-contain bg-no-repeat absolute top-0 left-0 z-[169]' />
            <div className='flex w-[148px] h-[49px] justify-between items-center absolute top-0 left-[313px] z-[172]'>
              <div className='w-[46px] h-[46px] shrink-0 bg-[url(../public/image/Share.png)] bg-contain bg-no-repeat relative z-[172]' />
              <span className="h-[44px] shrink-0 font-['Poppins'] text-[29px] font-normal leading-[43.5px] text-[#808080] relative text-left whitespace-nowrap z-[171]">
                Share
              </span>
            </div>
            <span className="flex h-[44px] justify-start items-start font-['Poppins'] text-[29px] font-normal leading-[43.5px] text-[#808080] absolute top-[3px] left-[65px] text-left whitespace-nowrap z-[168]">
              Helpful (29)
            </span>
            </button>
          </div>
        </div>
      
    {/* pagination */}
    <nav aria-label="Page navigation example">
  <ul class="list-style-none flex justify-center gap-10">
    <li>
      <a
        class="relative block rounded bg-purple-200  px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
        href="#"
        aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li>
      <a
        class="relative block rounded bg-purple-200  px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
        href="#"
        >1</a
      >
    </li>
    <li aria-current="page">
      <a
        class="relative block rounded bg-purple-200  px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
        href="#"
        >2</a
      >
    </li>
    <li>
      <a
        class="relative block rounded bg-purple-200  px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
        href="#"
        >3</a
      >
    </li>
    <li>
      <a
        class="relative block rounded bg-purple-200  px-3 py-1.5 text-sm text-surface transition duration-300 hover:bg-neutral-100 focus:bg-neutral-100 focus:text-primary-700 focus:outline-none active:bg-neutral-100 active:text-primary-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700 dark:active:text-primary-500"
        href="#"
        aria-label="Next"
        ><span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
    {/* end pagination */}
      </div>
</div>
</div>

      <Footer />
    </>
  );
};


export default DetailProducts;