import React from 'react';
import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Badge } from '@/ui/Badge';

interface SkillLevelHeaderProps {
  label: string;
  icon: LucideIcon;
  bgColor: string;
  borderColor: string;
  color: string;
  description: string;
  teamCount: number;
  recruitingCount: number;
  isExpanded: boolean;
  onToggle: () => void;
  showToggle: boolean;
}

export function SkillLevelHeader({
  label,
  icon,
  bgColor,
  borderColor,
  color,
  description,
  teamCount,
  recruitingCount,
  isExpanded,
  onToggle,
  showToggle,
}: SkillLevelHeaderProps) {
  return (
    <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
      <Stack direction="row" align="center" gap={3}>
        <Box 
          display="flex" 
          center 
          width="11" 
          height="11" 
          rounded="xl" 
          className={`${bgColor} border ${borderColor}`}
        >
          <Icon icon={icon} size={5} className={color} />
        </Box>
        <Box>
          <Stack direction="row" align="center" gap={2}>
            <Heading level={2}>{label}</Heading>
            <Badge variant="default">
              {teamCount} {teamCount === 1 ? 'team' : 'teams'}
            </Badge>
            {recruitingCount > 0 && (
              <Badge variant="success" icon={UserPlus}>
                {recruitingCount} recruiting
              </Badge>
            )}
          </Stack>
          <Text size="sm" color="text-gray-500">{description}</Text>
        </Box>
      </Stack>

      {showToggle && (
        <Box
          as="button"
          type="button"
          onClick={onToggle}
          display="flex"
          alignItems="center"
          gap={1}
          px={3}
          py={1.5}
          rounded="lg"
          className="text-sm text-gray-400 hover:text-white hover:bg-iron-gray/50 transition-all"
        >
          <Text size="sm">{isExpanded ? 'Show less' : `View all ${teamCount}`}</Text>
          <Icon icon={ChevronRight} size={4} className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
        </Box>
      )}
    </Box>
  );
}