components/QuickCart.jsx

import React from 'react';
import { Minus, Plus, ShoppingBag } from 'lucide-react';

const QuickCart = ({ cart, onRemoveItem, onUpdateQuantity, onOpenCart }) => {
  const formatPrice = (price) => {
    return new Intl.NumberFormat('th-TH', {
      style: 'currency',
      currency: 'THB'
    }).format(price);
  };

  const cartTotal = cart.reduce((sum, item) => {
    const price = item.discount > 0 
      ? item.price * (1 - item.discount/100) 
      : item.price;
    return sum + (price * item.quantity);
  }, 0);

  const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <div className="bg-white rounded-2xl border border-pos-border p-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <div className="bg-primary-600 p-2 rounded-lg">
            <ShoppingBag className="w-5 h-5 text-white" />
          </div>
          <div>
            <h3 className="font-bold text-pos-text">ตะกร้า</h3>
            <p className="text-xs text-pos-text-secondary">{cartCount} รายการ</p>
          </div>
        </div>
        <button 
          onClick={onOpenCart}
          className="text-sm font-medium text-primary-600 hover:bg-primary-50 px-3 py-1 rounded-lg transition-colors"
        >
          ดูทั้งหมด
        </button>
      </div>
      
      {cart.length === 0 ? (
        <div className="py-8 text-center text-pos-text-secondary">
          <ShoppingBag className="w-8 h-8 mx-auto mb-2 opacity-50" />
          <p className="text-sm">ไม่มีสินค้าในตะกร้า</p>
        </div>
      ) : (
        <div className="space-y-3">
          {cart.slice(0, 3).map((item) => {
            const price = item.discount > 0 
              ? item.price * (1 - item.discount/100) 
              : item.price;
            const itemTotal = price * item.quantity;
            
            return (
              <div key={item.id} className="flex items-center gap-3">
                <div className="w-10 h-10 flex-shrink-0 rounded-lg overflow-hidden">
                  <img 
                    src={item.image} 
                    alt={item.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-sm text-pos-text truncate">{item.name}</p>
                  <p className="text-xs text-pos-text-secondary">
                    {formatPrice(price)} x {item.quantity}
                  </p>
                </div>
                <div className="flex flex-col items-end gap-1">
                  <p className="font-bold text-sm text-primary-600">{formatPrice(itemTotal)}</p>
                  <div className="flex items-center gap-1">
                    <button 
                      onClick={() => onUpdateQuantity(item.id, Math.max(1, item.quantity - 1))}
                      className="p-0.5 rounded hover:bg-pos-bg"
                    >
                      <Minus className="w-3 h-3 text-pos-text-secondary" />
                    </button>
                    <span className="text-xs w-4 text-center">{item.quantity}</span>
                    <button 
                      onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}
                      className="p-0.5 rounded hover:bg-pos-bg"
                    >
                      <Plus className="w-3 h-3 text-pos-text-secondary" />
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
          
          {cart.length > 3 && (
            <div className="text-center">
              <p className="text-xs text-pos-text-secondary">
                และอีก {cart.length - 3} รายการ
              </p>
            </div>
          )}
          
          <div className="border-t border-pos-border pt-3 mt-3 flex justify-between items-center">
            <p className="text-sm font-medium text-pos-text-secondary">ยอดรวม</p>
            <p className="text-lg font-bold text-primary-600">{formatPrice(cartTotal)}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default QuickCart;