import React, { useState } from 'react';

interface Product {
  id: number;
  name: string;
  sku: string;
  price: number;
  image: string;
  stock: number;
}

export default function ProductGrid() {
  const [products] = useState<Product[]>([
    { id: 1, name: 'Widget A', sku: 'WID-001', price: 29.99, image: '📦', stock: 50 },
    { id: 2, name: 'Widget B', sku: 'WID-002', price: 49.99, image: '📦', stock: 30 },
    { id: 3, name: 'Gadget Pro', sku: 'GAD-001', price: 79.99, image: '⚙️', stock: 15 },
    { id: 4, name: 'Tool Set', sku: 'TOL-001', price: 99.99, image: '🔧', stock: 8 },
    { id: 5, name: 'Premium Pack', sku: 'PRE-001', price: 149.99, image: '🎁', stock: 25 },
    { id: 6, name: 'Starter Kit', sku: 'STA-001', price: 39.99, image: '📦', stock: 100 },
  ]);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Product Grid</h1>
      
      <div style={styles.grid}>
        {products.map(product => (
          <div key={product.id} style={styles.card}>
            <div style={styles.imageContainer}>
              <div style={styles.image}>{product.image}</div>
            </div>
            <div style={styles.content}>
              <h3 style={styles.productName}>{product.name}</h3>
              <p style={styles.sku}>{product.sku}</p>
              <div style={styles.footer}>
                <span style={styles.price}>${product.price.toFixed(2)}</span>
                <span style={{
                  ...styles.stock,
                  color: product.stock < 10 ? '#ef4444' : product.stock < 30 ? '#f59e0b' : '#10b981'
                }}>
                  {product.stock} in stock
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: '2rem',
    backgroundColor: '#111827',
    minHeight: '100vh',
    color: '#f9fafb',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '2rem',
    color: '#f9fafb',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
    gap: '1.5rem',
  },
  card: {
    backgroundColor: '#1f2937',
    borderRadius: '0.5rem',
    overflow: 'hidden',
    border: '1px solid #374151',
    transition: 'transform 0.2s',
    cursor: 'pointer',
  },
  imageContainer: {
    backgroundColor: '#374151',
    padding: '2rem',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    fontSize: '4rem',
  },
  content: {
    padding: '1rem',
  },
  productName: {
    fontSize: '1.125rem',
    fontWeight: '600',
    marginBottom: '0.25rem',
    color: '#f9fafb',
  },
  sku: {
    fontSize: '0.875rem',
    color: '#9ca3af',
    marginBottom: '1rem',
  },
  footer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  price: {
    fontSize: '1.25rem',
    fontWeight: 'bold',
    color: '#3b82f6',
  },
  stock: {
    fontSize: '0.75rem',
    fontWeight: '500',
  },
};
