<template>
    <div>
        <!-- Basic usage -->
        <h1 class="font-bold text-[25px] text-accent-foreground">Basic</h1>
        <DateSelector v-model="date" />

        <!-- With custom width -->
        <h1 class="font-bold text-[25px] text-accent-foreground">Custom Width</h1>
        <DateSelector v-model="date" classValue="w-full" />

        <!-- Start in BS mode -->
        <h1 class="font-bold text-[25px] text-accent-foreground">Default BS</h1>
        <DateSelector v-model="date" :isBS="true" />

        <!-- Without toggle button -->
        <h1 class="font-bold text-[25px] text-accent-foreground">Toggle Removed</h1>
        <DateSelector v-model="date" :showToggle="false" />

        <!-- Disabled state -->
        <h1 class="font-bold text-[25px] text-accent-foreground">Disabled</h1>
        <DateSelector v-model="date" :disabled="true" />
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const date = ref("2025-04-06");
</script>
