---
import type { Url } from '@recivi/schema'

import Icon from '@/components/Icon.astro'
import Link from '@/components/Link.astro'

interface Props {
  id?: string | undefined
  name: string
  /**
   * If you don't wish the component to be a link, don't pass the `url` prop or
   * pass `undefined`.
   */
  url?: Url | undefined
}
let { id = undefined, name, url = undefined, ...attrs } = Astro.props
---

<span class="inline-block">
  {
    id && (
      <Icon
        name={id}
        {...attrs}
      />
    )
  }
  {url ? <Link {url}>{name}</Link> : <span>{name}</span>}
</span>