<template>
  <div class="flex flex-col h-full bg-white">
    <div class="p-5 border-b border-gray-100">
      <h2 class="text-xl font-semibold">
        Сколько времени у тебя на прогулку?
      </h2>
      <p class="text-sm text-gray-500 mt-1">
        Укажи время в любом формате: «1 час», «90 минут», «полтора часа», «до 6 вечера» и т.д.
      </p>
    </div>

    <div class="flex-1 p-5">
      <input
          v-model="store.duration"
          class="w-full border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"
          placeholder="2 часа"
      />
    </div>

    <div class="p-4 border-t border-gray-100">
      <button
          :disabled="!store.duration || !store.duration.trim()"
          :class="{
            'opacity-50 cursor-not-allowed': !store.duration || !store.duration.trim()
          }"
          class="w-full bg-cyan-500 hover:bg-cyan-600 text-white py-3 rounded-2xl font-semibold transition"
          @click="goNext"
      >
        Продолжить
      </button>
    </div>
  </div>
</template>

<script setup>
import {useMainStore} from "../store/main";

const store = useMainStore();

function goNext() {
  if (store.duration && store.duration.trim()) {
    store.screen = 5;
  }
}
</script>
