---
import TagsList from '@/components/tags-list.astro';
import Typography from '@/components/typography.astro';
import type { Tag } from '@/types/common';
import type { LevelledSkill, SkillSet } from '@/types/skills-section';

import LevelledSkillSubsection from './levelled-skill-subsection.astro';

export interface Props {
  skillSet: SkillSet<Tag> | SkillSet<LevelledSkill>;
}

const {
  skillSet: { skills, title },
} = Astro.props;

const isLevelledSkillSection = (skillsSectionData: Tag[] | LevelledSkill[]): skillsSectionData is LevelledSkill[] => {
  const firstSkill = skillsSectionData[0];
  if (!firstSkill) return false;

  return 'level' in firstSkill && firstSkill.level !== undefined;
};
---

<div class="flex flex-col gap-3">
  <Typography variant="section-subtitle">{title}</Typography>
  {isLevelledSkillSection(skills) ? <LevelledSkillSubsection skills={skills} /> : <TagsList tags={skills} />}
</div>