import React from 'react';
import { Card } from '../ui/card';
import { Badge } from '../ui/badge';
import { GearItem } from '../../types';
import { Tag, DollarSign } from 'lucide-react';

interface EquipmentCardProps {
  item: GearItem;
  onClick: (item: GearItem) => void;
}

export const EquipmentCard: React.FC<EquipmentCardProps> = ({
  item,
  onClick,
}) => {
  const statusColor = {
    Active: 'text-kodo-lime bg-kodo-lime/10',
    Maintenance: 'text-kodo-orange bg-kodo-orange/10',
    Sold: 'text-gray-400 bg-gray-500/10',
    Wishlist: 'text-kodo-magenta bg-kodo-magenta/10',
  };

  return (
    <Card
      variant="default"
      className="group p-0 overflow-hidden cursor-pointer hover:border-kodo-cyan/50 transition-all hover:shadow-lg flex flex-col h-full"
      onClick={() => onClick(item)}
    >
      <div className="relative aspect-square bg-gray-900 overflow-hidden">
        <img
          src={item.image || 'https://via.placeholder.com/400'}
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-90 group-hover:opacity-100"
        />
        <div className="absolute top-2 right-2">
          <span
            className={`px-2 py-1 rounded text-[10px] font-bold uppercase backdrop-blur-md ${statusColor[item.status]}`}
          >
            {item.status}
          </span>
        </div>
      </div>

      <div className="p-4 flex flex-col flex-1">
        <div className="flex justify-between items-start mb-1">
          <Badge label={item.category} variant="terminal" className="mb-2" />
        </div>

        <h3 className="font-bold text-white text-base truncate mb-1">
          {item.name}
        </h3>
        <p className="text-kodo-gold text-xs font-mono uppercase mb-4">
          {item.brand} {item.model}
        </p>

        <div className="mt-auto pt-3 border-t border-white/5 flex justify-between items-center text-xs">
          <div className="flex items-center gap-1 text-gray-400">
            <Tag className="w-3 h-3" /> {item.condition}
          </div>
          <div className="flex items-center gap-1 font-mono text-white font-bold">
            <DollarSign className="w-3 h-3 text-kodo-cyan" />{' '}
            {item.purchasePrice}
          </div>
        </div>
      </div>
    </Card>
  );
};
