import { cn } from '@/lib/utils';
import { Skill } from '@/types/skills';
import { CategoryBadge } from '@/components/CategoryBadge';

interface SkillCardProps {
  skill: Skill;
  isSelected: boolean;
  onSelect: () => void;
}

export function SkillCard({ skill, isSelected, onSelect }: SkillCardProps) {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          onSelect();
        }
      }}
      className={cn(
        'group relative w-full text-left p-4 transition-all duration-200 cursor-pointer',
        'border-b border-border/30 last:border-b-0',
        'hover:bg-accent/50',
        isSelected && 'bg-primary/8 hover:bg-primary/10'
      )}
    >
      {isSelected && (
        <span className="absolute left-0 top-3 bottom-3 w-[3px] rounded-full bg-primary shadow-[0_0_12px_hsl(var(--primary)/0.5)]" />
      )}

      <div className="pl-1 space-y-2">
        <h3
          className={cn(
            'font-medium text-sm truncate transition-colors',
            isSelected ? 'text-foreground' : 'text-foreground/90 group-hover:text-foreground'
          )}
        >
          {skill.name}
        </h3>
        <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
          {skill.description}
        </p>
        <CategoryBadge category={skill.category} />
      </div>
    </div>
  );
}