<template>
  <TabbedLayout>
    <template #preview>
      <div class="space-y-8">
        <div class="demo-section">
          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
            <ElasticSlider />
          </div>
        </div>

        <div class="demo-section">
          <h2 class="demo-title-extra">Using Steps</h2>

          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
            <ElasticSlider :is-stepped="true" :step-size="10" />
          </div>
        </div>

        <div class="demo-section">
          <h2 class="demo-title-extra">Custom Range & Icons</h2>

          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
            <ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
              <template #left-icon>
                <i class="pi pi-thumbs-down text-xl"></i>
              </template>

              <template #right-icon>
                <i class="pi pi-thumbs-up text-xl"></i>
              </template>
            </ElasticSlider>
          </div>
        </div>

        <PropTable :data="propData" />
      </div>
    </template>

    <template #code>
      <CodeExample :code-object="elasticSlider" />
    </template>

    <template #cli>
      <CliInstallation v-bind="elasticSlider" />
    </template>
  </TabbedLayout>
</template>

<script setup lang="ts">
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import PropTable from '@/components/common/PropTable.vue';
import CodeExample from '@/components/code/CodeExample.vue';
import CliInstallation from '@/components/code/CliInstallation.vue';
import ElasticSlider from '@/content/Components/ElasticSlider/ElasticSlider.vue';
import { elasticSlider } from '@/constants/code/Components/elasticSliderCode';

const propData = [
  {
    name: 'defaultValue',
    type: 'number',
    default: '50',
    description: 'The initial value of the slider. It can be less than startingValue or greater than maxValue.'
  },
  {
    name: 'startingValue',
    type: 'number',
    default: '0',
    description: "The starting point for the slider's range, e.g., startingValue=100 allows the slider to start at 100."
  },
  {
    name: 'maxValue',
    type: 'number',
    default: '100',
    description: 'The maximum value the slider can reach.'
  },
  {
    name: 'className',
    type: 'string',
    default: "''",
    description: 'Allows passing custom class names to style the component.'
  },
  {
    name: 'isStepped',
    type: 'boolean',
    default: 'false',
    description: 'Enables or disables stepped increments on the slider.'
  },
  {
    name: 'stepSize',
    type: 'number',
    default: '1',
    description: 'The size of the increments for the slider when isStepped is enabled.'
  },
  {
    name: 'leftIcon',
    type: 'Component | string',
    default: "'-'",
    description: 'Custom Vue component or string to display on the left side of the slider.'
  },
  {
    name: 'rightIcon',
    type: 'Component | string',
    default: "'+'",
    description: 'Custom Vue component or string to display on the right side of the slider.'
  }
];
</script>

<style scoped>
.demo-container {
  height: 300px;
  min-height: 300px;
  overflow: hidden;
}

.demo-title-extra {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.5rem;
}
</style>
