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

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

const meta: Meta<typeof MdashCheck> = {
  title: 'Components/Text/Mdash/MdashCheck',
  component: MdashCheck,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>MdashCheck</code> conditionally renders its children or
              an em dash (—) based on the check prop.
            </span>
          }
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof MdashCheck>

const Template: Story = {
  render: (args) => {
    return (
      <div>
        Value: {args.check ? 'true' : 'false'}
        <MdashCheck {...args}>Content Here</MdashCheck>
      </div>
    )
  },
}

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

export const CheckIsFalse: Story = {
  ...Template,
  args: {
    check: false,
  },
}