<script setup lang="ts">
import { computed } from "vue";

type Props = {
  variant?: "primary" | "secondary" | "blue" | "text";
  size?: "normal" | "large";
  disabled?: boolean;
  href?: string;
};

const props = withDefaults(defineProps<Props>(), {
  variant: "primary",
  size: "normal",
  disabled: false,
  href: undefined,
});

const emits = defineEmits(["click"]);

const tag = computed(() => (props.href ? "a" : "button"));

const classes = computed(() => {
  const result = ["flex items-center"];

  if (props.disabled) {
    result.push("opacity-50 cursor-not-allowed");
  }

  switch (props.variant) {
    case "secondary":
      result.push("btn-secondary");
      break;
    case "blue":
      result.push("btn-blue");
      break;
    case "text":
      result.push("btn-text");
      break;
    default:
      result.push("btn-primary");
  }

  if (props.size === "large") {
    result.push("px-6 py-3 text-xl font-bold");
  }

  return result;
});

function handleClick(event: MouseEvent) {
  if (props.disabled) {
    event.preventDefault();
  } else {
    emits("click");
  }
}
</script>

<template>
  <component
    :is="tag"
    :class="classes"
    :disabled="disabled"
    :href="href"
    @click="handleClick"
  >
    <slot></slot>
  </component>
</template>

<style lang="scss" scoped></style>
