<script setup lang="ts">
interface Props {
  text?: string;
  href?: string;
  icon?: string;
  size?: "xs" | "s" | "m" | "l" | "xl";
  shape?: "round" | "square";
  color?: "elevated" | "filled" | "tonal" | "outlined" | "standard" | "text";
  target?: "_blank" | "_self" | "_parent" | "_top";
}

const props = withDefaults(defineProps<Props>(), {
  size: "s",
  shape: "round",
  color: "filled",
  target: "_blank",
});
</script>

<template>
  <component
    :is="href ? 'a' : 'button'"
    :href="href"
    class="md-button"
    :class="[props.shape, props.size, props.color, props.icon ? 'icon' : '']"
  >
    <span v-if="props.icon">
      {{ props.icon }}
    </span>
    {{ props.text }}
  </component>
</template>

<style lang="scss" scoped>
@use "../styles/mixin";

.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;

  text-decoration: none !important;
  vertical-align: middle;

  border-color: transparent;
  border-style: solid;
  border-width: 0px;

  background-color: transparent;

  cursor: pointer;
  overflow: hidden;
  transition: border-radius var(--md-sys-motion-spring-fast-spatial-standard-duration)
    var(--md-sys-motion-spring-fast-spatial-standard);

  &::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;

    z-index: 0;
  }

  &:hover {
    &::after {
      background-color: var(--md-sys-state-hover-state-layer);
    }
  }

  &:focus-visible {
    @include mixin.focus-ring($thickness: 3, $offset: 2);

    &::after {
      background-color: var(--md-sys-state-focus-state-layer);
    }
  }

  &:active {
    transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);

    &::after {
      background-color: var(--md-sys-state-pressed-state-layer);
    }
  }

  &.xs {
    @include mixin.typescale-style("label-large");

    gap: 8px;

    height: 32px;

    padding-inline: 12px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 20);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-medium);
    }
  }

  &.s {
    @include mixin.typescale-style("label-large");

    gap: 8px;

    height: 40px;

    padding-inline: 16px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 20);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-medium);
    }
  }

  &.m {
    @include mixin.typescale-style("title-medium");

    gap: 8px;

    height: 56px;

    padding-inline: 24px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 24);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-large);
    }
  }

  &.l {
    @include mixin.typescale-style("headline-small");

    gap: 12px;

    height: 96px;

    padding-inline: 48px;

    border-width: 2px;

    span {
      @include mixin.material-symbols($size: 32);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }
  }

  &.xl {
    @include mixin.typescale-style("headline-large");

    gap: 16px;

    height: 136px;

    padding-inline: 64px;

    border-width: 3px;

    span {
      @include mixin.material-symbols($size: 40);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }
  }

  &.elevated {
    color: var(--md-sys-color-primary);

    background-color: var(--md-sys-color-surface-container-low);

    box-shadow: 0px 1px 3px var(--md-sys-color-shadow);
  }

  &.filled {
    color: var(--md-sys-color-on-primary);

    background-color: var(--md-sys-color-primary);
  }

  &.tonal {
    color: var(--md-sys-color-on-secondary-container);

    background-color: var(--md-sys-color-secondary-container);
  }

  &.outlined {
    color: var(--md-sys-color-on-surface-variant);

    border-color: var(--md-sys-color-outline-variant);
  }

  &.standard,
  &.text {
    color: var(--md-sys-color-primary);
  }
}
</style>
