---
import Icon from '@/atoms/icon';
import Typography from '@/atoms/typography.astro';
import type { LevelledSkill } from '@/types/skills-section';

import SkillLevel from './skill-level.astro';

export interface Props extends LevelledSkill {}

const { url, icon, iconColor, name, level } = Astro.props;

const IconWrapper = url ? 'a' : 'div';
---

<div class:list={['flex', 'flex-col', 'gap-2']}>
  <IconWrapper
    class:list={['flex', 'gap-2', 'h-5']}
    {...(url && { href: url, target: "_blank", rel: "noopener noreferrer" })}
  >
    <Icon client:load name={icon} color={iconColor} size={20} />
    <Typography variant="tile-subtitle">
      <span class="text-gray-700">{name}</span>
    </Typography>
  </IconWrapper>
  <SkillLevel skillLevel={level} />
</div>