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

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
      className={`${bgColor} border ${borderColor} flex items-center justify-between p-3 rounded-lg h-auto`}
    >
      <Stack direction="row" align="center" gap={2}>
        <Icon icon={icon} size={4} className={color} />
        <Text weight="medium" color="text-white">{label}</Text>
      </Stack>
      <Text size="sm" color="text-gray-400">{count} teams</Text>
    </Button>
  );
}