import type { Meta, StoryFn } from '@storybook/vue3-vite';
import UISkeleton from '@/UI-kit/components/UI/skeleton/UISkeleton.vue';

export default {
    title: 'UI/UISkeleton',
    component: UISkeleton,
    argTypes: {
        width: { control: 'text' },
        height: { control: 'text' },
        borderRadius: { control: 'text' },
        animated: { control: 'boolean' },
    },
    args: {
        width: '100%',
        height: '16px',
        borderRadius: '8px',
        animated: true,
    },
} as Meta<typeof UISkeleton>;

export const Default: StoryFn<typeof UISkeleton> = (args) => ({
    components: { UISkeleton },
    setup() {
        return { args };
    },
    template: '<UISkeleton v-bind="args" />',
});

export const Static: StoryFn<typeof UISkeleton> = (args) => ({
    components: { UISkeleton },
    setup() {
        return { args: { ...args, animated: false } };
    },
    template: '<UISkeleton v-bind="args" />',
});

/** Пример раскладки как в деталке объявления (ClassifiedListingDetailSkeleton). */
export const DetailLayout: StoryFn<typeof UISkeleton> = () => ({
    components: { UISkeleton },
    template: `
        <div style="display: flex; flex-direction: column; gap: 16px; width: 360px; padding: 16px;">
            <UISkeleton width="100%" height="240px" border-radius="0" />
            <div style="display: flex; justify-content: space-between; gap: 12px;">
                <UISkeleton width="42%" height="32px" />
                <UISkeleton width="28%" height="24px" border-radius="999px" />
            </div>
            <UISkeleton width="55%" height="14px" />
            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--gray-100);">
                <UISkeleton width="30%" height="12px" />
                <UISkeleton width="100%" height="14px" />
                <UISkeleton width="92%" height="14px" />
            </div>
            <div style="display: flex; gap: 8px;">
                <UISkeleton width="100%" height="48px" />
                <UISkeleton width="62px" height="48px" />
            </div>
        </div>
    `,
});
