<template>
  <div class="page-tab">
    <el-segmented
      v-model="activeTab"
      class="segmented"
      :options="options"
      block
      size="large"
      @change="handleSegmentedChange"
    />
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  });

  const activeTab = ref(props.modelValue || '');
  const options = [
    { label: $t('navigation.support'), value: '' },
    { label: $t('navigation.faq'), value: 'faq' },
    { label: $t('navigation.documents'), value: 'documents' },
    { label: $t('navigation.contact-info'), value: 'contact-us' },
  ];

  const handleSegmentedChange = (value: string) => {
    const localePath = useLocalePath();
    navigateTo(localePath(`/support/${value}`));
  };
</script>

<style scoped>
  .segmented {
    --el-segmented-bg-color: transparent;
    --el-segmented-item-active-color: var(--el-color-primary);
    --el-segmented-item-color: var(--el-text-color-secondary);
    --el-segmented-item-hover-color: var(--el-color-primary);
    --el-segmented-item-border-color: transparent;
    --el-segmented-item-active-border-color: transparent;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .segmented :deep(.el-segmented__item-selected) {
    /* --el-border-radius-base: 16px; */
    transition: none;
    background: transparent;
  }

  .segmented :deep(.el-segmented__item) {
    &:hover {
      background: transparent;
      color: var(--el-color-primary);
    }

    &.is-selected {
      color: var(--el-color-primary-dark-2);
      border-bottom: 4px solid var(--el-color-primary-dark-2);
    }
  }
</style>
