import { useState } from 'react';

interface ProductInfoProps {
  product: {
    name: string;
    price: number;
    description: string;
    sizes: string[];
    colors: { name: string; hex: string }[];
  };
  onAddToCart: (quantity: number, size: string, color: string) => void;
}

const ProductInfo = ({ product, onAddToCart }: ProductInfoProps) => {
  const [quantity, setQuantity] = useState(1);
  const [selectedSize, setSelectedSize] = useState(product.sizes[1]);
  const [selectedColor, setSelectedColor] = useState(product.colors[0].name);

  const handleIncrement = () => setQuantity(prev => prev + 1);
  const handleDecrement = () => setQuantity(prev => (prev > 1 ? prev - 1 : 1));

  return (
    <div className="product-info">
      <div>
        <h2 style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>{product.name}</h2>
        <p style={{ fontSize: '1.5rem', fontWeight: '600' }}>${product.price}</p>
      </div>

      <p style={{ color: 'var(--text-muted)' }}>{product.description}</p>

      <div className="variants-section">
        <span style={{ fontWeight: '600' }}>Size: {selectedSize}</span>
        <div className="variant-options">
          {product.sizes.map(size => (
            <button
              key={size}
              className={`variant-btn ${selectedSize === size ? 'selected' : ''}`}
              onClick={() => setSelectedSize(size)}
            >
              {size}
            </button>
          ))}
        </div>
      </div>

      <div className="variants-section">
        <span style={{ fontWeight: '600' }}>Color: {selectedColor}</span>
        <div className="variant-options">
          {product.colors.map(color => (
            <button
              key={color.name}
              className={`color-swatch ${selectedColor === color.name ? 'selected' : ''}`}
              style={{ backgroundColor: color.hex }}
              onClick={() => setSelectedColor(color.name)}
              title={color.name}
            />
          ))}
        </div>
      </div>

      <div className="variants-section">
        <span style={{ fontWeight: '600' }}>Quantity</span>
        <div className="quantity-selector">
          <button className="quantity-btn" onClick={handleDecrement}>−</button>
          <span className="quantity-display">{quantity}</span>
          <button className="quantity-btn" onClick={handleIncrement}>+</button>
        </div>
      </div>

      <button 
        className="add-to-cart-btn"
        onClick={() => onAddToCart(quantity, selectedSize, selectedColor)}
      >
        Add to Cart
      </button>
    </div>
  );
};

export default ProductInfo;
