import { SearchX } from 'lucide-react';
import { Skill } from '@/types/skills';
import { SkillCard } from './SkillCard';
import { ScrollArea } from '@/components/ui/scroll-area';

interface SkillListProps {
  skills: Skill[];
  selectedSkill: Skill | null;
  onSelect: (skill: Skill) => void;
}

export function SkillList({ skills, selectedSkill, onSelect }: SkillListProps) {
  if (skills.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full min-h-[12rem] px-6 text-center">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-muted/60 mb-3">
          <SearchX className="h-6 w-6 text-muted-foreground" />
        </div>
        <p className="text-sm font-medium text-foreground mb-1">No skills found</p>
        <p className="text-xs text-muted-foreground">Try a different search or category</p>
      </div>
    );
  }

  return (
    <ScrollArea className="h-full">
      <div>
        {skills.map((skill) => (
          <SkillCard
            key={skill.id}
            skill={skill}
            isSelected={selectedSkill?.id === skill.id}
            onSelect={() => onSelect(skill)}
          />
        ))}
      </div>
    </ScrollArea>
  );
}