<template>
  <div class="flex items-center gap-1 rounded-lg p-1" :class="containerClass">
    <NuxtLink
      v-for="loc in locales"
      :key="loc.code"
      :to="switchLocalePath(loc.code)"
      class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
      :class="locale === loc.code ? activeClass : inactiveClass"
    >
      {{ loc.code.toUpperCase() }}
    </NuxtLink>
  </div>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'light'
  }
})

const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const containerClass = computed(() =>
  props.variant === 'dark' ? 'bg-base-200' : 'bg-base-100/10'
)

const activeClass = computed(() =>
  props.variant === 'dark'
    ? 'bg-base-100 text-base-content shadow-sm'
    : 'bg-base-100/20 text-base-content'
)

const inactiveClass = computed(() =>
  props.variant === 'dark'
    ? 'text-base-content/60 hover:text-base-content'
    : 'text-base-content/60 hover:text-base-content'
)
</script>
