veza/apps/web/src/components/commerce/CartItem.tsx

import React from 'react';
import { CartItem as CartItemType } from '../../stores/cartStore';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Trash2, Tag } from 'lucide-react';

interface CartItemProps {
  item: CartItemType;
  onRemove: (id: string) => void;
}

export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
  // Access product details from nested object
  const { product } = item;

  const price = item.selectedLicense ? item.selectedLicense.price : product.price;
  const licenseName = item.selectedLicense
    ? item.selectedLicense.name
    : 'Standard';

  return (
    <Card
      variant="default"
      className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-border/50 transition-all"
    >
      {/* Thumbnail */}
      <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-kodo-graphite">
        <img
          src={product.coverUrl}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-slow)]"
          alt={product.title}
        />
      </div>

      {/* Info */}
      <div className="flex-1 w-full text-center md:text-left">
        <h4 className="font-bold text-white text-lg">{product.title}</h4>
        <p className="text-muted-foreground text-sm mb-2">{product.author}</p>
        <div className="flex items-center justify-center md:justify-start gap-2 text-xs">
          <span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded flex items-center gap-1">
            <Tag className="w-3 h-3 text-muted-foreground" /> {licenseName} License
          </span>
          <span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-muted-foreground">
            {product.type}
          </span>
        </div>
      </div>

      {/* Price & Actions */}
      <div className="flex flex-row md:flex-col items-center gap-4 md:gap-2 w-full md:w-auto justify-between">
        <div className="text-xl font-mono font-bold text-white">
          ${price.toFixed(2)}
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
          onClick={() => onRemove(item.cartId)}
        >
          <Trash2 className="w-4 h-4" />
        </Button>
      </div>
    </Card>
  );
};