import React from 'react';
import { CartItem as CartItemType } from '../../types';
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 }) => {
  const price = item.selectedLicense ? item.selectedLicense.price : item.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-kodo-steel/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={item.coverUrl}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          alt={item.title}
        />
      </div>

      {/* Info */}
      <div className="flex-1 w-full text-center md:text-left">
        <h4 className="font-bold text-white text-lg">{item.title}</h4>
        <p className="text-kodo-content-dim text-sm mb-2">{item.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-kodo-steel" /> {licenseName} License
          </span>
          <span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-kodo-content-dim">
            {item.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-kodo-content-dim hover:text-kodo-red hover:bg-kodo-red/10"
          onClick={() => onRemove(item.cartId)}
        >
          <Trash2 className="w-4 h-4" />
        </Button>
      </div>
    </Card>
  );
};