import type { Meta, StoryObj } from '@storybook/react';
import { LoadingSpinner } from './loading-spinner';
import { Button } from './button';

const meta = {
    title: 'UI/LoadingSpinner',
    component: LoadingSpinner,
    tags: ['autodocs'],
    argTypes: {
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
        },
        text: { control: 'text' },
        inline: { control: 'boolean' },
        variant: {
            control: 'select',
            options: ['default', 'muted', 'white', 'current'],
        },
    },
} satisfies Meta<typeof LoadingSpinner>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {},
};

export const WithText: Story = {
    args: {
        text: 'Loading resources...',
    },
};

export const Small: Story = {
    args: {
        size: 'sm',
    },
};

export const Large: Story = {
    args: {
        size: 'lg',
        text: 'Please wait, this might take a while...',
    },
};

export const InlineSizes: Story = {
    render: () => (
        <div className="flex items-center gap-4">
            <LoadingSpinner size="sm" inline />
            <LoadingSpinner size="md" inline />
            <LoadingSpinner size="lg" inline />
        </div>
    ),
};

export const InlineVariants: Story = {
    render: () => (
        <div className="flex items-center gap-4 bg-muted p-4 rounded-md">
            <LoadingSpinner variant="default" inline />
            <LoadingSpinner variant="muted" inline />
            <LoadingSpinner variant="white" inline />
            <div className="text-destructive">
                <LoadingSpinner variant="current" inline />
            </div>
        </div>
    ),
};

export const InButton: Story = {
    render: () => (
        <Button disabled>
            <LoadingSpinner size="sm" inline className="mr-2" />
            Loading...
        </Button>
    ),
};