import type { CartItem } from '../App';

interface CartSidebarProps {
  isOpen: boolean;
  onClose: () => void;
  items: CartItem[];
  onRemove: (id: number) => void;
}

const CartSidebar = ({ isOpen, onClose, items, onRemove }: CartSidebarProps) => {
  const total = items.reduce((acc, item) => acc + item.price * item.quantity, 0);

  return (
    <>
      <div className={`cart-overlay ${isOpen ? 'open' : ''}`} onClick={onClose} />
      <div className={`cart-sidebar ${isOpen ? 'open' : ''}`}>
        <div className="cart-header">
          <h2 style={{ fontSize: '1.5rem' }}>Your Cart</h2>
          <button onClick={onClose} style={{ fontSize: '1.5rem' }}>✕</button>
        </div>

        <div className="cart-items">
          {items.length === 0 ? (
            <p style={{ textAlign: 'center', marginTop: '2rem', color: 'var(--text-muted)' }}>
              Your cart is empty.
            </p>
          ) : (
            items.map(item => (
              <div key={item.id} className="cart-item">
                <img src={item.image} alt={item.name} className="cart-item-img" />
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <h4 style={{ fontWeight: '600' }}>{item.name}</h4>
                    <button onClick={() => onRemove(item.id)} style={{ color: 'var(--text-muted)' }}>✕</button>
                  </div>
                  <p style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>
                    {item.size} / {item.color}
                  </p>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '0.5rem' }}>
                    <span>Qty: {item.quantity}</span>
                    <span style={{ fontWeight: '600' }}>${item.price * item.quantity}</span>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {items.length > 0 && (
          <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1.5rem', marginTop: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1.5rem', fontSize: '1.1rem', fontWeight: 'bold' }}>
              <span>Total</span>
              <span>${total}</span>
            </div>
            <button className="add-to-cart-btn">
              Checkout
            </button>
          </div>
        )}
      </div>
    </>
  );
};

export default CartSidebar;
