---
export interface Item {
  href: string
  label: string
  title?: string
  external?: boolean
}

const { title, items } = Astro.props as {
  title: string
  items: Item[]
}

const sectionTitleClass = 'm-0 px-[10px] text-[16px] font-semibold leading-none text-heading'
const tagCloudClass =
  'mt-4 mb-0 list-none pl-0 leading-normal [column-count:1] [column-gap:20px] sm:[column-count:2] sm:[column-gap:40px] sm:[column-rule:1px_solid_var(--color-line)]'
const tagCloudItemClass = 'mb-2 block break-inside-avoid'
const tagLinkClass =
  'inline-block rounded-[4px] border border-line px-[10px] py-0.5 text-muted no-underline hover:border-accent hover:text-accent hover:no-underline'
---

<section aria-labelledby={`${title.toLowerCase()}-title`}>
  <h1 id={`${title.toLowerCase()}-title`} class={sectionTitleClass}>{title}</h1>

  <ul class={tagCloudClass} role="list">
    {
      items.map((item) => (
        <li class={tagCloudItemClass}>
          <a
            href={item.href}
            class={tagLinkClass}
            title={item.title ?? item.label}
            target={item.external ? '_blank' : undefined}
            rel={item.external ? 'noopener noreferrer' : undefined}
          >
            {item.label}
          </a>
        </li>
      ))
    }
  </ul>
</section>