<script lang="ts">
  import Icon from "@iconify/svelte";

  let {
    name,
    label,
    size = "md",
  }: {
    name?: string;
    label?: string;
    size?: "sm" | "md" | "lg";
  } = $props();
</script>

<span
  class="icon-glyph"
  data-size={size}
  data-icon-name={name}
  aria-label={label}
  aria-hidden={label ? undefined : "true"}
>
  {#if name}
    <Icon icon={name} />
  {/if}
</span>

<style>
  .icon-glyph {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: var(--ui-border);
    background: #050605;
    color: currentColor;
    line-height: 1;
  }

  .icon-glyph :global(svg) {
    width: 1.35rem;
    height: 1.35rem;
  }

  .icon-glyph[data-size="sm"] {
    width: 1.75rem;
    height: 1.75rem;
  }

  .icon-glyph[data-size="lg"] {
    width: 3rem;
    height: 3rem;
  }
</style>
