<template>
  <div class="contacts">
    <UInput
      v-model="name"
      size="xl"
      placeholder=" "
      :ui="{ base: 'peer' }"
      class="relative"
    >
      <label
        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
          name
            ? '-top-3 text-sm text-highlighted font-medium'
            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
        ]"
      >
        <span class="inline-flex bg-default px-1">Имя</span>
      </label>
    </UInput>

    <UInput
      v-model="surname"
      size="xl"
      placeholder=" "
      :ui="{ base: 'peer' }"
      class="relative"
    >
      <label
        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
          surname
            ? '-top-3 text-sm text-highlighted font-medium'
            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
        ]"
      >
        <span class="inline-flex bg-default px-1">Фамилия</span>
      </label>
    </UInput>

    <UInput
      v-model="phone"
      v-maska="'+7 (###) ###-##-##'"
      size="xl"
      placeholder=" "
      :ui="{ base: 'peer' }"
      class="relative"
    >
      <label
        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
          phone
            ? '-top-3 text-sm text-highlighted font-medium'
            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
        ]"
      >
        <span class="inline-flex bg-default px-1">телефон</span>
      </label>
    </UInput>

    <UInput
      v-model="email"
      size="xl"
      placeholder=" "
      :ui="{ base: 'peer' }"
      class="relative"
      trailing-icon="i-lucide-at-sign"
    >
      <label
        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
          email
            ? '-top-3 text-sm text-highlighted font-medium'
            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
        ]"
      >
        <span class="inline-flex bg-default px-1">email</span>
      </label>
    </UInput>

    <UButton
      size="xl"
      label="продолжить"
      class="justify-center text-center"
      @click="nextStep"
    />
  </div>
</template>

<script lang="ts" setup>
import { useCheckout } from '../../composables/useCheckout'

const name = ref('')
const surname = ref('')
const phone = ref('')
const email = ref('')

const { nextStep } = useCheckout()

definePageMeta({
  layout: 'checkout',
})
</script>

<style lang="scss">
.contacts {
  margin-inline: auto;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
