import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { LucideIcon } from 'lucide-react';

interface SkillLevelButtonProps {
  label: string;
  icon: LucideIcon;
  color: string;
  bgColor: string;
  borderColor: string;
  count: number;
  onClick: () => void;
}

export function SkillLevelButton({
  label,
  icon,
  color,
  bgColor,
  borderColor,
  count,
  onClick,
}: SkillLevelButtonProps) {
  return (
    <Button
      variant="ghost"
      onClick={onClick}
      fullWidth
      style={{ 
        padding: '0.75rem', 
        height: 'auto', 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        borderRadius: 'var(--ui-radius-lg)'
      }}
    >
      <Group gap={2}>
        <Icon icon={icon} size={4} className={color} />
        <Text weight="medium" variant="high">{label}</Text>
      </Group>
      <Text size="sm" variant="low">{count} teams</Text>
    </Button>
  );
}
