import type { CartItem as CartItemType } from '@/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import Image from 'next/image';
import { MinusCircle, PlusCircle, XCircle } from 'lucide-react';

interface CartItemProps {
  item: CartItemType;
  onUpdateQuantity: (productId: string, quantity: number) => void;
  onRemoveItem: (productId: string) => void;
}

export function CartItem({ item, onUpdateQuantity, onRemoveItem }: CartItemProps) {
  const handleQuantityChange = (newQuantity: number) => {
    if (newQuantity >= 0) { // Allow 0 to remove item effectively
      onUpdateQuantity(item.id, newQuantity);
    }
  };

  return (
    <div className="flex items-center space-x-3 py-3 border-b last:border-b-0">
      <Image
        src={item.imageUrl || "https://placehold.co/64x64.png"}
        alt={item.name}
        width={64}
        height={64}
        className="rounded-md object-cover"
        data-ai-hint="product item"
      />
      <div className="flex-grow">
        <p className="font-medium text-sm">{item.name}</p>
        <p className="text-xs text-muted-foreground">${item.price.toFixed(2)}</p>
      </div>
      <div className="flex items-center space-x-1.5">
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => handleQuantityChange(item.quantity - 1)}
          disabled={item.quantity <= 0}
        >
          <MinusCircle className="h-4 w-4" />
        </Button>
        <Input
          type="number"
          value={item.quantity}
          onChange={(e) => handleQuantityChange(parseInt(e.target.value, 10) || 0)}
          className="h-8 w-12 text-center px-1"
          min="0"
        />
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => handleQuantityChange(item.quantity + 1)}
        >
          <PlusCircle className="h-4 w-4" />
        </Button>
      </div>
      <p className="font-semibold w-16 text-right text-sm">${(item.price * item.quantity).toFixed(2)}</p>
      <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" onClick={() => onRemoveItem(item.id)}>
        <XCircle className="h-4 w-4" />
      </Button>
    </div>
  );
}