import React, { useState } from 'react';

const styles = {
  card: {
    width: 300,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: '#fff',
    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
    cursor: 'pointer',
    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
  },
  cardHover: {
    transform: 'translateY(-4px)',
    boxShadow: '0 12px 32px rgba(0, 0, 0, 0.12)',
  },
  imagePlaceholder: {
    width: '100%',
    height: 220,
    backgroundColor: '#f0f0f0',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#aaa',
    fontSize: 14,
    letterSpacing: 1,
  },
  body: {
    padding: '20px 24px 24px',
  },
  name: {
    margin: 0,
    fontSize: 18,
    fontWeight: 600,
    color: '#1a1a1a',
  },
  description: {
    margin: '8px 0 0',
    fontSize: 14,
    lineHeight: 1.5,
    color: '#666',
  },
  footer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 20,
  },
  price: {
    fontSize: 22,
    fontWeight: 700,
    color: '#1a1a1a',
  },
  button: {
    padding: '10px 20px',
    border: 'none',
    borderRadius: 10,
    backgroundColor: '#111',
    color: '#fff',
    fontSize: 14,
    fontWeight: 600,
    cursor: 'pointer',
    transition: 'background-color 0.2s ease',
  },
  buttonHover: {
    backgroundColor: '#333',
  },
  buttonAdded: {
    backgroundColor: '#16a34a',
  },
};

export default function ProductCard({
  name = 'Product Name',
  description = 'A short description of the product that highlights its key features and benefits.',
  price = 49.99,
  imageUrl = null,
  onAddToCart,
}) {
  const [hovered, setHovered] = useState(false);
  const [btnHovered, setBtnHovered] = useState(false);
  const [added, setAdded] = useState(false);

  const handleAddToCart = (e) => {
    e.stopPropagation();
    setAdded(true);
    onAddToCart?.({ name, price });
    setTimeout(() => setAdded(false), 1500);
  };

  return (
    <div
      style={{ ...styles.card, ...(hovered ? styles.cardHover : {}) }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {imageUrl ? (
        <img src={imageUrl} alt={name} style={{ width: '100%', height: 220, objectFit: 'cover' }} />
      ) : (
        <div style={styles.imagePlaceholder}>
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" strokeWidth="1.5">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="8.5" cy="8.5" r="1.5" />
            <path d="M21 15l-5-5L5 21" />
          </svg>
        </div>
      )}

      <div style={styles.body}>
        <h3 style={styles.name}>{name}</h3>
        <p style={styles.description}>{description}</p>

        <div style={styles.footer}>
          <span style={styles.price}>${price.toFixed(2)}</span>
          <button
            style={{
              ...styles.button,
              ...(added ? styles.buttonAdded : btnHovered ? styles.buttonHover : {}),
            }}
            onMouseEnter={() => setBtnHovered(true)}
            onMouseLeave={() => setBtnHovered(false)}
            onClick={handleAddToCart}
          >
            {added ? 'Added!' : 'Add to Cart'}
          </button>
        </div>
      </div>
    </div>
  );
}