<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Skeleton from './Skeleton.svelte';

const { Story } = defineMeta({
    title: 'Shared/Skeleton',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Skeleton component for loading states. Displays a shimmer animation when `animate` prop is true.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        animate: {
            control: 'boolean',
            description: 'Whether to show the shimmer animation',
        },
    },
});
</script>

<Story
    name="Default"
    args={{
        animate: true,
    }}
>
    <div class="flex flex-col gap-4 p-4 w-full">
        <div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
            <div class="flex items-center justify-between mb-4">
                <Skeleton class="h-8 w-1/3" />
                <Skeleton class="h-8 w-8 rounded-full" />
            </div>
            <Skeleton class="h-32 w-full" />
        </div>
    </div>
</Story>
