import React from 'react';
import { FaPlus, FaMinus } from 'react-icons/fa';

export default function CartItem({ item, onIncrement, onDecrement }) {
  const product = item?.product || {};

  return (
    <div className="flex items-center justify-between bg-gray-200 rounded-lg p-2 mb-2 shadow">
      <div className="flex flex-col">
        <p className="font-semibold text-gray-800 max-w-[14rem] truncate">
          {product.name || 'Unbekanntes Produkt'}
        </p>
        <p className="text-sm text-gray-600">
          €{((product.price_cents ?? 0) / 100).toFixed(2).replace('.', ',')}
        </p>
      </div>

      <div className="flex items-center gap-2">
        <button
          onClick={() => onDecrement(product.id)}
          className="bg-red-600 hover:bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded"
          aria-label="Menge verringern"
          type="button"
        >
          <FaMinus className="text-lg" />
        </button>
        <span className="font-semibold text-xl text-gray-800 min-w-6 text-center">
          {item.quantity}
        </span>
        <button
          onClick={() => onIncrement(product.id)}
          className="bg-green-600 hover:bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded"
          aria-label="Menge erhöhen"
          type="button"
        >
          <FaPlus className="text-lg" />
        </button>
      </div>
    </div>
  );
}