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

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

const meta: Meta<typeof LabelAndData> = {
  title: 'Components/LabelAndData',
  component: LabelAndData,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>LabelAndData</code> component provides a clean text
              display format featuring a descriptive label paired with its
              corresponding value. It organizes information in a structured and
              accessible way, helping users quickly understand the context of
              displayed information. The label serves as an identifying header,
              while the data portion shows the specific information or value
              associated with that label.
            </span>
          }
          infoBullets={[
            'Create clear visual distinction between labels and values to improve readability and allow users to easily scan between different information elements.',
            'Apply appropriate formatting to data values based on their content type (dates, numbers, text, etc.) to ensure information is presented in the most user-friendly format.',
          ]}
        />
      ),
    },
  },
}
export default meta
type Story = StoryObj<typeof LabelAndData>

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

export const Basic: Story = {
  ...Template,
  args: {
    label: 'Label',
    data: 'Add data content here!',
    check: true,
  },
}

export const NoData: Story = {
  ...Template,
  args: {
    label: 'Label',
    data: 'Add data content here!',
    check: false,
  },
}