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

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

const meta: Meta<typeof Skeleton> = {
  title: 'Components/Loaders/Skeleton',
  component: Skeleton,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Skeleton</code> component serves as a versatile loading
              indicator, offering a base component that supports customization
              through optional <code>height</code> and <code>width</code> props.
              The default styling includes a single element that is 4px tall,
              with a width set to occupy 100% of its parent container.
              Developers can use this base component to create more complex{' '}
              <code>Skeleton</code> loaders by building upon its provided styles
              and animations.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Utilize the <code>Skeleton</code> component as a loading indicator
              to provide visual feedback to users while content is being loaded
              or generated.
            </span>,
            <span key='second-bullet'>
              Existing tempate: <code>Skeleton.HeaderMetric</code>. This
              component is meant to be used with the <code>HeaderMetric</code>{' '}
              component.
            </span>,
            <span key='third-bullet'>
              More templates are likely to follow as we create unique loading
              experiences.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof Skeleton>

const SkeletonTemplate: Story = {
  render: (args) => <Skeleton {...args} />,
}

export const Basic: Story = {
  ...SkeletonTemplate,
  args: {
    width: 100,
  },
}

const HeaderMetricTemplate: Story = {
  render: () => <Skeleton.HeaderMetric />,
}

const CardTemplate: Story = {
  render: () => <Skeleton.Card width={175} />,
}

const CardFooterTemplate: Story = {
  render: () => <Skeleton.CardFooter width={175} />,
}

export const HeaderMetricSkeleton: Story = {
  ...HeaderMetricTemplate,
}

export const CardSkeleton: Story = {
  ...CardTemplate,
}

export const CardFooterSkeleton: Story = {
  ...CardFooterTemplate,
}