'use client';

import { BarChart3 } from 'lucide-react';
const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
];

interface SkillDistributionProps {
  drivers: {
    skillLevel?: string;
  }[];
}

export function SkillDistribution({ drivers }: SkillDistributionProps) {
  const distribution = SKILL_LEVELS.map((level) => ({
    ...level,
    count: drivers.filter((d) => d.skillLevel === level.id).length,
    percentage: drivers.length > 0
      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100)
      : 0,
  }));

  return (
    <div className="mb-10">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-neon-aqua/10 border border-neon-aqua/20">
          <BarChart3 className="w-5 h-5 text-neon-aqua" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
          <p className="text-xs text-gray-500">Driver population by skill level</p>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {distribution.map((level) => {
          const Icon = level.icon;
          return (
            <div
              key={level.id}
              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
            >
              <div className="flex items-center justify-between mb-3">
                <Icon className={`w-5 h-5 ${level.color}`} />
                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
              </div>
              <p className="text-white font-medium mb-1">{level.label}</p>
              <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
                <div
                  className={`h-full rounded-full transition-all duration-500 ${
                    level.id === 'pro' ? 'bg-yellow-400' :
                    level.id === 'advanced' ? 'bg-purple-400' :
                    level.id === 'intermediate' ? 'bg-primary-blue' :
                    'bg-green-400'
                  }`}
                  style={{ width: `${level.percentage}%` }}
                />
              </div>
              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}