import { Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import AISkeleton from '.';

const meta: Meta<typeof AISkeleton> = {
  component: AISkeleton,
  title: 'Design System/AI/AISkeleton',
  tags: ['autodocs'],
  args: {
    children: (
      <Typography
        p={1}
        sx={{ color: 'common.white' }}
      >
        Lorem ipsum odor amet, consectetuer adipiscing elit.
      </Typography>
    ),
    isLoading: true,
    variant: 'rounded',
  },
  argTypes: {
    children: { control: { disable: true } },
    isLoading: {
      control: 'boolean',
      table: {
        defaultValue: { summary: 'true' },
      },
    },
    variant: {
      control: 'radio',
      options: ['rectangular', 'circular', 'rounded', 'text'],
      table: {
        defaultValue: { summary: 'rounded' },
      },
    },
    width: {
      control: 'number',
      min: 0,
      table: {
        type: { summary: 'number' },
      },
    },
    height: {
      control: 'number',
      min: 0,
      table: {
        type: { summary: 'number' },
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof AISkeleton>;

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

export const NotLoading: Story = {
  args: {
    isLoading: false,
  },
};

export const Rectangular: Story = {
  args: {
    variant: 'rectangular',
  },
};

export const CircularWithFixedDimensions: Story = {
  args: {
    variant: 'circular',
    width: 60,
    height: 60,
  },
};

export const RoundedWithFixedDimensions: Story = {
  args: {
    variant: 'rounded',
    width: 210,
    height: 60,
  },
};

export const Square: Story = {
  args: {
    variant: 'rounded',
    width: 80,
    height: 80,
  },
};