<script setup lang="ts">
import { computed } from "vue";
import { cn } from "../../lib/cn";

const props = withDefaults(defineProps<{
  variant?: "default" | "primary" | "ghost" | "outline";
  type?: "button" | "submit" | "reset";
}>(), {
  variant: "default",
  type: "button"
});

const classes = computed(() => cn("ui-button", `ui-button--${props.variant}`));
</script>

<template>
  <button :type="type" :class="classes">
    <slot />
  </button>
</template>
