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

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

const meta: Meta<typeof Mdash> = {
  title: 'Components/Text/Mdash/Mdash',
  component: Mdash,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Mdash</code> component is a placeholder used to
              represent the absence of a data value. It consists of an em dash
              character (—) displayed in place of the missing data, indicating
              that the information is not available or not applicable. The
              component helps maintain visual consistency and ensures users are
              aware of the data gap within the interface.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>Mdash</code> component in data tables, header
              metrics, or any other data-driven sections where specific data
              values may be missing.
            </span>,
            <span key='second-bullet'>
              Use the <code>Mdash</code> placeholder consistently across the
              application to provide a standardized representation of missing
              data, enhancing user understanding.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Mdash>

const Template: Story = {
  render: (args) => {
    return <Mdash {...args} />
  },
}

export const Basic: Story = {
  ...Template,
  args: {},
}