<script lang="ts">
  import type { BtnColor, BtnSize } from "$lib/util/types";

  import Icon from "./Icon.svelte";

  export let path: string;
  export let size: BtnSize = "sm";
  export let color: BtnColor = "ghost";
  export let cls = "";
  export let ariaLabel: undefined | string = undefined;
  export let ariaPressed: undefined | boolean = undefined;
  export let tabindex: undefined | number = undefined;
</script>

<button
  class={`btn ${color === "default" ? "" : `btn-${color}`} btn-circle ${
    size === "md" ? "" : "btn-" + size
  } ${cls}`}
  aria-label={ariaLabel}
  aria-pressed={ariaPressed}
  {tabindex}
  on:click
>
  <Icon {path} size={size === "lg" ? 3 : size === "md" ? 2 : 1.5} />
</button>
