---
import SectionCard from '@/components/section-card.astro';
import type { Section } from '@/types/data';
import type { SkillsSection } from '@/types/skills-section';

import SkillSubsection from './skill-subsection.astro';

export interface Props extends SkillsSection {}

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

const section: Section = 'skills';
---

<SectionCard section={section} title={title}>
  <div class="flex flex-col gap-10">
    {skillSets.map((skillSet) => <SkillSubsection skillSet={skillSet} />)}
  </div>
</SectionCard>