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

import { statColors } from '../../services/GraphHelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'

export const Example = (): React.JSX.Element => {
  const result = statColors()
  return (
    <>
      <pre>{JSON.stringify(result, null, 2)}</pre>
    </>
  )
}

Example.storyName = 'statColors'

export default {
  title: 'Helper Functions/statColors',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { statColors } from '@patterninc/react-ui'

// Get the color mapping for graph statuses
const colors = statColors();

Output: { success: 'var(--green)', error: 'var(--red)', standard: 'var(--lavender)' }`}
            description='A utility function designed for graphs that provides a mapping of status types to their corresponding colors.'
            infoBullets={[
              <span key='first-line'>
                <code>statColors</code> is used to retrieve predefined color
                mappings for graph statuses like success, error, and standard.
              </span>,
              <span key='second-line'>
                Returns an object with three properties:
                <ul>
                  <li>
                    <code>success</code>: The color for success status (green).
                  </li>
                  <li>
                    <code>error</code>: The color for error status (red).
                  </li>
                  <li>
                    <code>standard</code>: The color for standard status
                    (lavender).
                  </li>
                </ul>
              </span>,
              <span key='third-line'>
                <i>
                  Note: The colors are defined as CSS variables for consistent
                  theming.
                </i>
              </span>,
            ]}
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>