<script setup>
import { useNavigate } from '../../composables/Core/useNavigate'

const props = defineProps({
  to: {
    type: [String, Object],
    default: null
  },
  fallback: {
    type: String,
    default: 'Home'
  },
  text: {
    type: String,
    default: 'Back'
  },
  className: {
    type: String,
    default: ''
  }
})

const { navigate } = useNavigate()

const goBack = () => {
  if (props.to) {
    if (typeof props.to === 'string') {
      navigate({ page: props.to })
    } else {
      navigate(props.to)
    }
  } else if (window.history.length > 1) {
    window.history.back()
  } else {
    navigate({ page: props.fallback })
  }
}
</script>

<template>
  <button @click="goBack" class="back-button-premium" :class="className" type="button">
    <div class="icon-container">
      <i class="fas fa-chevron-left"></i>
    </div>
    <span v-if="text" class="back-text">{{ text }}</span>
  </button>
</template>

<style scoped>
.back-button-premium {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  padding: 6px 14px;
  border-radius: 50px;
  color: var(--text-primary, #333);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  outline: none;
}

.back-button-premium:hover {
  transform: translateX(-3px);
  background: var(--bg-primary, #fff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: var(--border-color, rgba(0, 0, 0, 0.1));
}

.back-button-premium:active {
  transform: translateX(-1px) scale(0.97);
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bg-tertiary, #f8f9fa);
  color: var(--text-primary, #1a1a1a);
  border-radius: 50%;
  font-size: 10px;
  transition: all 0.3s ease;
}

.back-button-premium:hover .icon-container {
  background: var(--text-primary, #1a1a1a);
  color: var(--bg-primary, #fff);
}

.back-text {
  letter-spacing: -0.2px;
}

/* Dark mode support */
:global(.dark-mode) .back-button-premium {
  background: rgba(30, 32, 38, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

:global(.dark-mode) .icon-container {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

:global(.dark-mode) .back-button-premium:hover {
  background: rgba(55, 60, 75, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

:global(.dark-mode) .back-button-premium:hover .icon-container {
  background: #fff;
  color: #1a1a1a;
}
</style>
