import React, { useState } from "react";
import './PersPastelStyle.css';

function Pastel() {
    
  return (
    <>
      <div className="container-title">Pastel</div>
      <main>
        <div className="container-img-1">
          {/* Contenido de tu contenedor de imagen */}
        </div>
        <div className="container-info-product">
          <div className="container-price">
            <span>Pastel Arcoiris</span>
            <i className="fa-solid fa-angle-right"></i>
          </div>

          <div className="container-details-product">
            <div className="form-group">
                <div className="OpcionesPers">
                <h2 className="textPersPastel">Personaliza tu pastel</h2>
                <div className="mb-4">
                    <p className="pastel-Type">Tipo de Pastel</p>
                    <div className="botones-pastel">
                    <button className="boton-1">
                        Vanilla Rainbow Cake
                    </button>
                    <button className="boton-2">
                        Confetti Cake
                    </button>
                    <button className="boton-3">
                        Black & White Cake with Chocolate Fudge
                    </button>
                    <button className="boton-4">
                        Chocolate Fudge Cake
                    </button>
                    </div>
                </div>
                <div className="mb-6">
                    <p className="label-text-pers">Inscription (30 Character Limit)</p>
                    <input className="input-text-pers"
                    type="text"
                    id="inscription"
                    name="inscription"
                    placeholder="Enter your text"
                    maxLength="30"
                    />
                </div>
                </div>
            </div>
          </div>

          <div className="container-add-cart">
            <button className="btn-add-to-cart">
              <i className="fa-solid fa-plus"></i>
              Añadir al carrito
            </button>
          </div>

          <div className="container-description">
            <div className="title-description">
              <h4>Descripción</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-description">
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Laboriosam iure provident atque voluptatibus reiciendis quae
                rerum, maxime placeat enim cupiditate voluptatum, temporibus
                quis iusto. Enim eum qui delectus deleniti similique? Lorem,
                ipsum dolor sit amet consectetur adipisicing elit. Sint autem
                magni earum est dolorem saepe perferendis repellat ipsam
                laudantium cum assumenda quidem quam, vero similique? Iusto
                officiis quod blanditiis iste?
              </p>
            </div>
          </div>

          <div className="container-additional-information">
            <div className="title-additional-information">
              <h4>Información adicional</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-additional-information hidden">
              <p>-----------</p>
            </div>
          </div>

          <div className="container-reviews">
            <div className="title-reviews">
              <h4>Reseñas</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-reviews hidden">
              <p>-----------</p>
            </div>
          </div>

          <div className="container-social">
            <span>Compartir</span>
            <div className="container-buttons-social">
              <a href="#"><i className="fa-solid fa-envelope"></i></a>
              <a href="#"><i className="fa-brands fa-facebook"></i></a>
              <a href="#"><i className="fa-brands fa-twitter"></i></a>
              <a href="#"><i className="fa-brands fa-instagram"></i></a>
              <a href="#"><i className="fa-brands fa-pinterest"></i></a>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

export default Pastel;