<script setup lang="ts">
import {twMerge} from "tailwind-merge";

type Props = {
  size?: 'sm' | 'md' | 'lg'
  view?: 'standard' | 'outline'
}

withDefaults(defineProps<Props>(), {view: 'outline', size: 'sm'})


const chipView = {
  standard: 'text-deepblue border-gray focus-visible:outline-gray',
  outline: 'text-blue border-blue focus-visible:outline-blue'
}

const sizeOptions = {
  sm: 'h-4',
  md: 'h-5',
  lg: 'h-7'
}
</script>

<template>
  <button
    :class="twMerge(['flex items-center gap-2 rounded-3xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
  >
    <slot/>
  </button>
</template>

<style scoped></style>
