---
interface Skill {
  category: string;
  details: string[];
  icon?: string;
}

interface Props {
  lang: string;
  skills: Skill[];
}

const { skills, lang } = Astro.props;
---

<section class="mb-4">
  <h3 class="text-xl font-semibold mb-2 text-gray-800">
    {lang === "de" ? "Fähigkeiten" : "Skills"}
  </h3>
  <div class="flex flex-col gap-2">
    {
      skills.map((skill) => (
        <div class="bg-gray-50 p-3 rounded-lg break-inside-avoid">
          <h4 class="font-bold text-gray-800 mb-2">
            {skill.icon} {skill.category}
          </h4>
          <div class="flex flex-wrap gap-2">
            {skill.details.map((s) => (
              <span class="bg-white px-2 py-0.5 rounded-full text-sm text-gray-700 border border-gray-200">
                {s}
              </span>
            ))}
          </div>
        </div>
      ))
    }
  </div>
</section>