import React from 'react';
import { motion } from 'motion/react';
import { Check } from 'lucide-react';
import { CardData } from '../types';

interface CardItemProps {
  card: CardData;
  isSelected: boolean;
  onToggle: (id: number) => void;
}

export const CardItem: React.FC<CardItemProps> = ({
  card,
  isSelected,
  onToggle,
}) => {
  let cardClass = "bg-white border border-slate-200 rounded-xl p-3.5 cursor-pointer select-none flex flex-col justify-between h-24 relative shadow-xs transition-all";
  
  if (isSelected) {
    cardClass += " border-[#4AA7BA] bg-[#E6F7FA] shadow-xs ring-2 ring-[#4AA7BA]/40";
  } else {
    cardClass += " hover:border-slate-300";
  }

  return (
    <motion.div
      whileTap={{ scale: 0.98 }}
      onClick={() => onToggle(card.id)}
      className={cardClass}
    >
      <div className="flex items-center justify-between">
        <span className="text-xs font-bold text-[#423475]">{card.creature}</span>
        <div
          className={`w-4 h-4 rounded border flex items-center justify-center text-[10px] transition-colors ${
            isSelected
              ? 'bg-[#4AA7BA] border-[#4AA7BA] text-white'
              : 'bg-slate-50 border-slate-300 text-transparent'
          }`}
        >
          <Check className={`w-3 h-3 ${isSelected ? 'opacity-100' : 'opacity-0'} transition-opacity`} />
        </div>
      </div>
      <div className="my-auto text-center py-1">
        <span className="text-xs font-bold block text-[#423475]">{card.power}</span>
      </div>
    </motion.div>
  );
};