<script lang="ts">
  import type { HTMLButtonAttributes } from "svelte/elements";
  import IconGlyph from "./IconGlyph.svelte";

  type IconButtonProps = Omit<HTMLButtonAttributes, "type"> & {
    icon: string;
    label: string;
    active?: boolean;
    type?: "button" | "submit" | "reset";
  };

  let {
    icon,
    label,
    active = false,
    disabled = false,
    type = "button",
    class: className = "",
    ...buttonProps
  }: IconButtonProps = $props();
</script>

<button
  {...buttonProps}
  class={className ? `icon-button ${className}` : "icon-button"}
  aria-label={label}
  data-active={active}
  {disabled}
  {type}
>
  <IconGlyph name={icon} size="sm" />
</button>

<style>
  .icon-button {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: var(--ui-border);
    background: rgba(2, 3, 2, 0.92);
    color: var(--ui-color-muted);
    cursor: pointer;
    padding: 0;
  }

  .icon-button[data-active="true"],
  .icon-button:hover {
    border-color: var(--ui-color-accent);
    color: var(--ui-color-accent);
  }

  .icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
</style>
