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

export interface Props extends SkillsSection {}

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

<div>
  <SectionHeading>{title}</SectionHeading>
  <div class="flex flex-col gap-5">
    {
      skillSets.map(
        (skillSet) =>
          !skillSet.excludeFromPdf && (
            <div>
              <div class="text-base font-extrabold text-gray-900">{skillSet.pdfTitle || 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>
