---
import type { SkillsSection } from '@/types/sections/skills-section.types';
import SectionHeading from '../components/section-heading.astro';

export interface Props extends SkillsSection {}

const { config, skillSets } = Astro.props;
---

<div>
  <SectionHeading>{config.title}</SectionHeading>
  <div class="flex flex-col gap-5">
    {
      skillSets.map((skillSet) => (
        <div>
          <div class="text-base font-extrabold text-gray-900">{skillSet.title}</div>
          <div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700">
            {skillSet.skills.map((skill) => {
              if ('level' in skill) {
                return (
                  <div class="flex h-6 w-fit overflow-hidden rounded">
                    <div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">{skill.name}</div>
                    <div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">{skill.level}/5</div>
                  </div>
                );
              }

              if (skill.name.includes(' - ')) {
                return (
                  <div class="flex h-6 w-fit overflow-hidden rounded">
                    <div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">
                      {skill.name.split(' - ')[0]}
                    </div>
                    <div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">
                      {skill.name.split(' - ')[1]}
                    </div>
                  </div>
                );
              }

              return <div class="flex h-6 w-fit items-center rounded bg-gray-100 px-2.5 font-medium">{skill.name}</div>;
            })}
          </div>
        </div>
      ))
    }
  </div>
</div>