---
import { Icon } from "astro-icon/components";

interface Props {
  id?: string;
  title?: string | undefined;
  icon?: string;
  ariaLabel?: string;
  class?: string | undefined;
}

const { title, icon, ariaLabel, id, ...otherProps } = Astro.props;
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<button
  id={id}
  class:list={["pressable", { "with-title": !!title }, otherProps.class]}
  aria-label={ariaLabel}
  title={ariaLabel}
  {...otherProps.class ? otherProps : {}}>
  {icon && <Icon name={icon} />}
  {title}
</button>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  button {
    border-radius: 9999px;
    padding-left: 1em;
    padding-right: 1em;
    height: 2.5em;

    display: flex;
    place-items: center;
    place-content: center;
    gap: 1em;
    white-space: nowrap;

    font-weight: 800;
    cursor: pointer;

    transition-duration: 250ms;
    transition-property: padding-top, box-shadow, background-color, color, border-color;

    &.with-title {
      padding-right: 1.2em;

      & > svg {
        width: 1.2em;
        height: 1.2em;
        flex-shrink: 0;
      }
    }

    > svg {
      width: 1.5em;
      height: 1.5em;
    }

    &:hover,
    &:focus-visible {
      box-shadow: inset 0 0.1em 0.1em 0 var(--color-shadow-2);
      translate: unset;
    }

    &:active {
      box-shadow: inset 0 0.1em 0.1em 0.1em var(--color-shadow-2);
      padding-top: 0.2em;
    }
  }
</style>