test startstida

import React from 'react';
import { Search, SlidersHorizontal, Heart, Shuffle, Eye } from 'lucide-react';

const Navigation = () => (
  <div className="flex items-center justify-between py-4 border-b border-gray-200">
    <div className="flex space-x-8">
      <button className="text-gray-900 font-medium">All</button>
      <button className="text-gray-500 hover:text-gray-900">Accessories</button>
      <button className="text-gray-500 hover:text-gray-900">Electronics</button>
      <button className="text-gray-500 hover:text-gray-900">Furniture</button>
      <button className="text-gray-500 hover:text-gray-900">Kitchen</button>
      <button className="text-gray-500 hover:text-gray-900">Lighting</button>
    </div>
    <div className="flex items-center space-x-4">
      <button className="flex items-center text-gray-500 hover:text-gray-900">
        <Search className="h-5 w-5" />
        <span className="ml-2">Search</span>
      </button>
      <button className="flex items-center text-gray-500 hover:text-gray-900">
        <SlidersHorizontal className="h-5 w-5" />
        <span className="ml-2">Filters</span>
      </button>
    </div>
  </div>
);

const ProductCard = ({ product }) => {
  const { title, brand, price, image, isHot, hasOptions } = product;
  
  return (
    <div className="group">
      <div className="relative aspect-w-1 aspect-h-1 bg-gray-100 mb-4">
        <img 
          src="/api/placeholder/400/400" 
          alt={title}
          className="w-full h-full object-cover"
        />
        
        {/* Quick actions */}
        <div className="absolute top-4 right-4 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
          <button className="p-2 bg-white rounded-full shadow hover:bg-gray-50">
            <Heart className="h-5 w-5" />
          </button>
          <button className="p-2 bg-white rounded-full shadow hover:bg-gray-50">
            <Shuffle className="h-5 w-5" />
          </button>
          <button className="p-2 bg-white rounded-full shadow hover:bg-gray-50">
            <Eye className="h-5 w-5" />
          </button>
        </div>

        {/* Hot label */}
        {isHot && (
          <div className="absolute top-4 left-4 bg-red-500 text-white text-xs px-2 py-1 rounded">
            HOT
          </div>
        )}

        {/* Add to cart or Select options button */}
        <div className="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
          {hasOptions ? (
            <button className="w-full bg-black text-white py-2 px-4 text-sm font-medium hover:bg-gray-800">
              Select options
            </button>
          ) : (
            <button className="w-full bg-black text-white py-2 px-4 text-sm font-medium hover:bg-gray-800">
              Add to cart
            </button>
          )}
        </div>
      </div>

      <h3 className="text-base font-medium text-gray-900">{title}</h3>
      <p className="text-sm text-gray-500 mt-1">{brand}</p>
      <div className="flex items-center justify-between mt-2">
        <span className="text-base font-medium text-gray-900">{price}</span>
        {hasOptions && (
          <div className="flex space-x-1">
            <span className="w-4 h-4 rounded-full bg-black border-2 border-white"></span>
            <span className="w-4 h-4 rounded-full bg-white border-2 border-gray-200"></span>
          </div>
        )}
      </div>
    </div>
  );
};

const ProductGrid = () => {
  const products = [
    {
      id: 1,
      title: "Air Pollution Sensor",
      brand: "Eone",
      price: "$249.00",
      hasOptions: true
    },
    {
      id: 2,
      title: "Bellham Lenkertasche",
      brand: "Mykita",
      price: "$129.00",
      hasOptions: false
    },
    {
      id: 3,
      title: "Bodum Tea Pot",
      brand: "Berghoff",
      price: "$149.00",
      hasOptions: true
    },
    {
      id: 4,
      title: "Bradley Element",
      brand: "Eone",
      price: "$149.00",
      isHot: true,
      hasOptions: false
    }
  ];

  return (
    <div className="max-w-screen-2xl mx-auto px-6">
      <Navigation />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-8">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default ProductGrid;