<template>
  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
    <UButton 
      :variant="variant" 
      :size="size"
      class="button-link"
    >
      <SmartIcon v-if="leftIcon" :name="leftIcon" class="icon-left" />
      <slot />
      <SmartIcon v-if="rightIcon" :name="rightIcon" class="icon-right" />
    </UButton>
  </NuxtLink>
</template>

<script setup lang="ts">
defineProps<{
  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  leftIcon?: string;
  rightIcon?: string;
  to?: string;
  href?: string;
  target?: string;
  blank?: boolean;
}>();
</script>

<style scoped>
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.3rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 0.2s ease;
  text-decoration: none;

}

.button-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.button-link:active {
  transform: translateY(0);
}

/* 实心按钮样式（蓝色按钮） */
:deep(.u-button--solid) {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

:deep(.u-button--solid:hover) {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 边框按钮样式（GitHub按钮） */
:deep(.u-button--outline) {
  background-color: white;
  color: #3b82f6;
  border-color: #3b82f6;
}

:deep(.u-button--outline:hover) {
  background-color: #eff6ff;
  border-color:var(--primary);
}

/* 图标按钮样式（Ghost图标） */
:deep(.u-button--ghost) {
  background-color: transparent;
  color: #3b82f6;
  border-color: transparent;
  padding: 0.5rem;
}

:deep(.u-button--ghost:hover) {
  background-color: #eff6ff;
  color: #2563eb;
}

.icon-left {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.icon-right {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
</style>
