PillTag: Skill Badge with Proficiency Level and Tooltip

import { PillTag } from '../components/y2k/PillTag';

// Render a level-5 TypeScript skill tag
<PillTag name="TypeScript" level={5} note="5 years of strict typing" color="cyan" />

import { PillTag } from '../components/y2k/PillTag';
// The skill categories object is the named export `a` from portfolioData.js.
// Import it under a readable alias:
import { a as skillCategories } from '../data/portfolioData';

// skillCategories shape (from portfolioData.js):
// {
//   Languages:  [{ name, level, note }, ...],
//   Frontend:   [{ name, level, note }, ...],
//   ...
// }

export function SkillsGrid() {
  return (
    <div className="space-y-8">
      {Object.entries(skillCategories).map(([category, skills]) => (
        <div key={category}>
          <h3 className="font-display text-y2k-magenta tracking-widest uppercase mb-3">
            {category}
          </h3>
          <div className="flex flex-wrap">
            {skills.map((skill) => (
              <PillTag
                key={skill.name}
                name={skill.name}
                level={skill.level}
                note={skill.note}
                color="cyan"
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}