"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import ProductCard from "@/components/ProductCard";
import { Sparkles } from "lucide-react";

interface Product {
  id: number;
  name: string;
  slug: string;
  price: string;
  sale_price?: string | null;
  image?: string | null;
  stock_quantity?: number;
  stock_status?: string;
  is_featured?: boolean;
  category?: {
    id: number;
    name: string;
    slug: string;
  } | null;
}

export default function NewProductsSection() {
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    try {
      const res = await api.get("/products");
      setProducts((res.data.data || []).slice(0, 8));
    } catch (error) {
      console.error(error);
    }
  };

  if (products.length === 0) return null;

  return (
    <section className="bg-[#f7fff8] py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4">

        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 bg-white border border-green-100 shadow-sm px-5 py-2 rounded-full">
            <Sparkles size={16} className="text-green-600" />
            <p className="text-green-600 font-black text-xs uppercase tracking-[0.25em]">
              Recently Added
            </p>
          </div>

          <h2 className="section-title mt-5">
            <span className="text-slate-900">New </span>
            <span className="bg-gradient-to-r from-green-500 to-green-700 bg-clip-text text-transparent">
              Products
            </span>
          </h2>

          <div className="mx-auto mt-5 h-1.5 w-24 rounded-full bg-gradient-to-r from-green-400 to-green-700" />
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-7">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

        <div className="text-center mt-12">
          <Link
            href="/products"
            className="inline-flex items-center justify-center bg-gradient-to-r from-green-500 to-green-700 text-white px-8 py-4 rounded-2xl font-bold"
          >
            View All Products
          </Link>
        </div>

      </div>
    </section>
  );
}