import axios from "axios";
import React, { useEffect } from "react";
import { FaStar } from "react-icons/fa6";
import { useLoaderData } from "react-router-dom";

const Products = () => {
  const data = useLoaderData();
  const products = data.data;
  console.log(products);
  return (
    <div className="max-w-screen-2xl px-5 mx-auto grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
      {products.map((item) => (
        <div key={item.id} className="h-auto border-[1px] bg-white hover:border-transparent shadow-none hover:shadow-testShadow duration-200 relative flex flex-col gap-4 border-gray-200 py-6 z-5 px-4">
          <div className="w-full h-auto flex items-center justify-center">
            <img
              className="w-52 h-64 object-contain"
              src={item.image}
              alt={item.title}
            />
            <span className="text-xs capitalize italic absolute top-2 right-2 text-gray-500">{item.category}</span>
          </div>
          <div className="flex justify-between text-sm">
          <h3 className=" font-titleFont font-medium">{item.title.substring(0,25)}</h3>
          <p className="text-gray-600 font-semibold">${item.price}</p>
          </div>
          <div>
            <p className="text-sm">
              {item.description.substring(0,100)}...  
            </p>
            <span className=" text-orange-600 flex justify-end">
            <FaStar />
            <FaStar />
            <FaStar />
            <FaStar />
            <FaStar />
            </span>
            <span className="flex justify-between mt-2">
            <button className="bg-green text-white hover:bg-sky_blue hover:text-black py-2 px-3 rounded-md">Add to Cart</button>
            <button className="bg-green text-white hover:bg-sky_blue hover:text-black py-2 px-3 rounded-md">View Details</button>

            </span>

          </div>
        </div>
      ))}
    </div>
  );
};

export default Products;
