import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'
import ListLoading from './ListLoading'

const meta: Meta<typeof ListLoading> = {
  title: 'Components/Loaders/ListLoading',
  component: ListLoading,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>ListLoading</code> shows an animated placeholder for a
              list with customizable options.
            </span>
          }
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof ListLoading>

const Template: Story = {
  render: (args) => {
    return (
      <div
        className='container'
        style={{
          width: '900px',
          padding: '24px',
        }}
      >
        <ListLoading {...args} />
      </div>
    )
  },
}

export const Standard: Story = {
  ...Template,
  args: {},
}
export const LongList: Story = {
  ...Template,
  args: {
    longList: true,
  },
}

export const CustomHeightAndGridGap: Story = {
  ...Template,
  args: {
    longList: true,
    customHeight: '24px',
    customGridGap: '4px',
  },
}