<script lang="ts" setup>
import type { ButtonTranslations } from 'vitepress/types/local-search'
import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'

const defaultTranslations: { button: ButtonTranslations } = {
  button: {
    buttonText: 'Поиск',
    buttonAriaLabel: 'Поиск'
  }
}

const $t = createSearchTranslate(defaultTranslations)
</script>

<template>
  <button type="button" :class="$style.HomeHeroSearchButton" :aria-label="$t('button.buttonAriaLabel')">
    <span :class="$style.HomeHeroSearchButtonContainer">
      <img :class="$style.HomeHeroSearchButtonIcon" src="/icons/search.svg" alt="Поиск">
      <span :class="$style.HomeHeroSearchButtonPlaceholder">{{ $t('button.buttonText') }}</span>
    </span>
  </button>
</template>

<style lang="scss" module>
@use "@beeline/design-tokens/scss/tokens/themes";
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
@use "@beeline/design-tokens/scss/mixin";
@use "@beeline/design-tokens/scss/tokens/components/search";

.HomeHeroSearchButton {
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: search.$search-border-radius;
  height: search.$search-medium-height;
  background: search.$search-background-color;

  &Container {
    display: flex;
  }

  &Icon {
    margin: 0 search.$search-category-icon-spacing;
    color: themes.$color-text-inactive;
    fill: currentColor;
  }

  &Placeholder {
    @include mixin.body2;
    color: themes.$color-text-disabled;
  }
}
</style>
