import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import productService from '../services/productService';
import LoadingSpinner from '../components/LoadingSpinner';
import './Home.css';

const Home = () => {
  const [featuredProducts, setFeaturedProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFeaturedProducts = async () => {
      try {
        const response = await productService.getProducts({ limit: 6 });
        setFeaturedProducts(response.products || []);
      } catch (error) {
        console.error('Error fetching products:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchFeaturedProducts();
  }, []);

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <div className="home">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <h1>Welcome to Wraffle</h1>
          <p>Premium hoodies for every style and occasion</p>
          <Link to="/shop" className="cta-button">Shop Now</Link>
        </div>
        <div className="hero-image">
          <img src="/wraffle_logo.png" alt="Wraffle Logo" className="hero-logo" />
        </div>
      </section>

      {/* Featured Products */}
      <section className="featured-products">
        <h2>Featured Hoodies</h2>
        <div className="products-grid">
          {featuredProducts.map((product) => (
            <div key={product.id} className="product-card">
              <div className="product-image">
                <img src={product.image_url || '/placeholder.jpg'} alt={product.name} />
              </div>
              <div className="product-info">
                <h3>{product.name}</h3>
                <p className="product-price">${product.price}</p>
                <Link to={`/productdetail`} className="view-product">View Details</Link>
              </div>
            </div>
          ))}
        </div>
        <div className="view-all">
          <Link to="/shop" className="view-all-button">View All Products</Link>
        </div>
      </section>

      {/* About Section */}
      <section className="about-preview">
        <div className="about-content">
          <h2>Why Choose Wraffle?</h2>
          <div className="features">
            <div className="feature">
              <h3>Premium Quality</h3>
              <p>High-quality fabrics and craftsmanship in every hoodie</p>
            </div>
            <div className="feature">
              <h3>Unique Designs</h3>
              <p>Exclusive designs that stand out from the crowd</p>
            </div>
            <div className="feature">
              <h3>Fast Shipping</h3>
              <p>Quick delivery to get your hoodie as soon as possible</p>
            </div>
          </div>
          <Link to="/about" className="learn-more">Learn More About Us</Link>
        </div>
      </section>
    </div>
  );
};

export default Home;
