import type { EquipmentItem } from '../types';

interface Props {
  item: EquipmentItem & { code?: string; image?: string };
  onClick: (item: any) => void;
  onAddToCart: (item: any) => void;
}

export default function EquipmentCard({ item, onClick, onAddToCart }: Props) {
  return (
    <div className="hms-eq-card" onClick={() => onClick(item)} role="article" tabIndex={0} onKeyDown={e => e.key === 'Enter' && onClick(item)}>
      <div className="aspect-[4/3] flex items-center justify-center relative overflow-hidden" style={{ background: 'var(--surface)' }}>
        {item.image ? (
          <img src={item.image} alt={item.name} loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
        ) : (
          <div className="text-4xl" style={{ color: 'var(--secondary)' }}>📦</div>
        )}
        {item.category && <span className="hms-badge hms-badge-primary absolute top-3 left-3">{item.category}</span>}
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-sm mb-1 truncate" style={{ color: 'var(--text)' }}>{item.name}</h3>
        <p className="text-xs mb-3 line-clamp-2" style={{ color: 'var(--secondary)' }}>{item.description}</p>
        <div className="flex items-center justify-between">
          <span className="text-xs" style={{ color: 'var(--secondary)' }}>{item.code}</span>
          <button onClick={e => { e.stopPropagation(); onAddToCart(item); }} className="hms-btn hms-btn-ghost text-xs px-3 py-1.5" style={{ color: 'var(--color-accent)' }} aria-label={item.name + ' zum Warenkorb hinzufügen'}>+ Hinzufügen</button>
        </div>
      </div>
    </div>
  );
}
