Home.js

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import products from "../data/Data";
import bannerImage from "../img/banner1.jpg";
import blueImage from "../img/PR1-blue.jpg.jpg"; // Sửa lại tên file nếu cần
import Footer from "../components/Footer";
import "../pages/Home.css";

const Home = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const navigate = useNavigate();

  const slides = products.map((product) => ({
    id: product.id,
    src: product.image,
  }));

  const handlePrev = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? slides.length - 1 : prevIndex - 1
    );
  };

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === slides.length - 1 ? 0 : prevIndex + 1
    );
  };

  const getSlideStyle = (index) => {
    if (index === currentIndex) return "carousel-item center";
    if (index === (currentIndex - 1 + slides.length) % slides.length)
      return "carousel-item left";
    if (index === (currentIndex + 1) % slides.length)
      return "carousel-item right";
    return "carousel-item hidden";
  };

  const goToDetail = (id) => {
    navigate(`/product/${id}`);
  };

  return (
    <div>
      {/* Banner */}
      <div className="banner">
        <img
          className="banner-image1"
          src={bannerImage}
          alt="Banner"
        />
      </div>

      {/* Carousel */}
      <div className="carousel">
        <button className="carousel-arrow left-arrow" onClick={handlePrev}>
          ❮
        </button>
        <div className="carousel-container">
          {slides.map((slide, index) => (
            <div
              key={slide.id}
              className={getSlideStyle(index)}
              onClick={() => goToDetail(slide.id)} // Chuyển đến chi tiết khi nhấn
              style={{ cursor: "pointer" }}
            >
              <img className="carousel-image" src={slide.src} alt={`Slide ${index + 1}`} />
            </div>
          ))}
        </div>
        <button className="carousel-arrow right-arrow" onClick={handleNext}>
          ❯
        </button>
      </div>

      {/* New Section */}
      <div className="greeting-section">
        <div className="greeting-container">
          <div className="greeting-circle">
            <img
              src={blueImage} // Đường dẫn tới hình ảnh đã import
              alt="Greeting"
              className="greeting-image"
            />
          </div>
          <div className="greeting-content">
            <h2>Xin chào</h2>
            <p>______________</p>
            <p>______________</p>
            <p>______________</p>
            <button className="greeting-button">Xem thêm</button>
          </div>
        </div>
      </div>

      {/* Custom Section */}
      <div className="custom-section">
        {/* Item 1 */}
        <div className="custom-item left">
          <div className="custom-image">
            <img src={require('../img/PR1-blue.jpg.jpg')} alt="Description 1" />
          </div>
          <div className="custom-text">
            <p>Content for the first image</p>
            <p>Some description goes here</p>
            <p>Additional details</p>
          </div>
        </div>

        {/* Item 2 */}
        <div className="custom-item right">
          <div className="custom-image">
            <img src={require('../img/PR1-blue.jpg.jpg')} alt="Description 2" />
          </div>
          <div className="custom-text">
            <p>Content for the second image</p>
            <p>Some description goes here</p>
            <p>Additional details</p>
          </div>
        </div>
      </div>

      {/* Chat Icon */}
      <div className="chat-icon">💬</div>
      <Footer />
    </div>
  );
};

export default Home;