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

import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu";
import { FaMagnifyingGlass } from "react-icons/fa6";
import { CiHeart } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa";
import { CiShare2 } from "react-icons/ci";
import { useNavigate } from "react-router-dom";
import pastelArcoirisFondo from "./assets/pastel-zarza.jpg"
import pastelArcoiris from "./assets/pastel1.jpg"

function Pastel() {
  const navigate = useNavigate();

  const redirectPersonalizarPastelArcoiris = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/PersonalizarPastel/PastelArcoiris");
    };
  
    const redirectInicio = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/");
    };

    const [imagenVisible, setImagenVisible] = useState(pastelArcoiris);

    const cambiarImagen = () => {
      if (imagenVisible === pastelArcoiris) {
        setImagenVisible(pastelArcoirisFondo);
      } else {
        setImagenVisible(pastelArcoiris);
      }
    };

  return (
    <>

<header>

<div className="container-hero">
  <div className="container hero">
    <div className="customer-support">
          <RiCustomerService2Fill className="icono-cliente" />
      <div className="content-customer-support">

        <span className="text">Soporte al cliente</span>
        <span className="number">123-456-7890</span>
        
      </div>
    </div>

    <div className="container-logo">
      <i className="fa-solid fa-mug-hot"></i>
      <h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
    </div>

    <div className="container-user">
        <FaUser className="icono-User"/>
    <LuShoppingBasket className="icono-basket"/>
      <div className="content-shopping-cart">
        <span className="text">Carrito</span>
        <span className="number">(0)</span>
      </div>
    </div>
  </div>
</div>


<div className="container-navbar">
  <nav className="navbar container">
    <i className="fa-solid fa-bars"></i>
    <ul className="menu">
      <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
      <li><a href="#">Pasteles</a></li>
      <li><a href="#">Personalizar Pastel</a></li>
      <li><a href="#">Pedidos</a></li>
      <li><a href="#">Blog</a></li>


    </ul>

    <form className="search-form">
      <input type="search" placeholder="Buscar..." />
      <button className="btn-search">
        <FaMagnifyingGlass className="icono-lupa" />
      </button>
    </form>
  </nav>
</div>


</header>

      <main className = "main-pers-pastel">
        <div className="container-img-1">
          <img className="imgPastel" src={imagenVisible} alt="Pastel"/>
        </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" onClick={cambiarImagen}>
                        Vanilla Rainbow Cake
                    </button>
                    <button className="boton-2">
                        Confetti Cake
                    </button>
                    <button className="boton-3">
                        Black & White Cake with Chocolate Fudged
                    </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;