<script setup lang="ts">
interface Props {
  size?: "large" | "medium" | "small" | "extra-small";
  disabled?: boolean;
  icon?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: "medium",
  disabled: false,
  icon: "",
});

// 크기별 스타일 클래스
const sizeClasses = {
  large: "px-10 h-16 text-lg rounded-lg",
  medium: "px-10 h-14 text-base rounded-lg",
  small: "px-10 h-12 text-sm rounded-lg",
  "extra-small": "px-6 h-10 text-sm rounded",
};

// 상태별 스타일 클래스
const getStateClasses = (disabled: boolean) => {
  if (disabled) {
    return "bg-white/10 text-gray-400 cursor-not-allowed";
  }

  return "bg-gray-700 text-white cursor-pointer";
};
</script>

<template>
  <button
    :class="[
      'group relative inline-flex items-center font-medium transition-all duration-200 border border-gray-600/30 overflow-hidden',
      sizeClasses[size],
      getStateClasses(props.disabled),
    ]"
    :disabled="disabled"
  >
    <span
      v-if="!disabled"
      class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200 rounded-inherit"
    ></span>
    <span class="relative">
      <slot />
      <span v-if="icon" :class="['flex-shrink-0']" v-html="icon" />
    </span>
  </button>
</template>
