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

import Icon from '../../components/icon.astro';
import SkillLevel from './skill-level.astro';

export interface Props extends LevelledSkill {}

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

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

<div class="flex flex-col gap-2">
  <div class="flex h-5 items-center justify-between">
    <IconWrapper class="flex gap-2 h-5" {...(url && { href: url, target: '_blank', rel: 'noopener noreferrer' })}>
      {icon && <Icon name={icon} color={iconColor} size={20} />}
      <Typography variant="tile-subtitle">
        <span class="text-gray-700 dark:text-gray-300">{name}</span>
      </Typography>
    </IconWrapper>
    {
      description && (
        <div class="flex h-3.5 w-3.5" data-tooltip={description} data-tooltip-placement="top">
          <Icon name="fa6-solid:circle-info" color="#D1D5DB" size={14} />
        </div>
      )
    }
  </div>
  <SkillLevel skillLevel={level} />
</div>
