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

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

const meta: Meta<typeof Ellipsis> = {
  title: 'Components/Text/Ellipsis',
  component: Ellipsis,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Ellipsis</code> component provides an animated loading
              indicator that consists of three dots. It's designed to be used
              alongside text to indicate loading states or processing actions.
              The component is lightweight and can be easily integrated into any
              text-based loading scenario.
            </span>
          }
          infoBullets={[
            'Use the Ellipsis component to indicate loading states in text-based contexts',
            'The animation is subtle and non-intrusive, making it ideal for inline loading indicators',
            'Common use cases include loading messages, processing states, and waiting for data to load',
            'The component is purely presentational and does not handle any loading logic',
            'Place the Ellipsis component directly after the loading text',
            'Ensure there is a space between the text and the Ellipsis component',
            'Use consistent spacing and alignment with surrounding text',
            'Consider using it with a loading message that provides context to the user',
          ]}
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof Ellipsis>

export const Basic: Story = {
  render: () => {
    return (
      <div>
        Loading
        <Ellipsis />
      </div>
    )
  },
  parameters: {
    docs: {
      source: {
        language: 'tsx',
        type: 'dynamic',
        excludeDecorators: true,
      },
    },
  },
}