<template>
  <view class="step-container">
    <!-- Title Area -->
    <view class="header-area">
      <view class="title">{{ title }}</view>
      <view class="sub-title">{{ subtitle }}</view>
    </view>
    
    <!-- Form Area -->
    <view class="content-area">
      <slot></slot>
    </view>
    
    <!-- Bottom Buttons -->
    <view class="footer-area">
      <button class="btn-next" @click="onNext">{{ nextText }}</button>
      <view class="btn-skip" v-if="showSkip" @click="onSkip">{{ skipText }}</view>
    </view>
  </view>
</template>

<script src="./step-layout.js"></script>

<style lang="scss" scoped>
@import './step-layout.scss';
</style>
