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

import { useIsClient } from '..'
import { DocsTemplate } from '../../../.storybook'
import OutputForDemo from '../../../.storybook/templates/OutputForDemo'

export const Example = (): React.JSX.Element => {
  const isClient = useIsClient()

  return (
    <OutputForDemo
      output={
        <span>
          <b>{isClient.toString()}</b>
        </span>
      }
    />
  )
}
Example.storyName = 'useIsClient'
Example.args = {}

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

              const isClient = useIsClient()

              Output: boolean
            `}
            description='A hook used to determine if the client is present. This is a necessary check to keep our components compliant with server-side rendering requirements.'
            infoBullets={[
              <span key='first-point'>
                This hook returns a boolean value; <code>true</code> if the
                client is available and <code>false</code> if it is not.
              </span>,
            ]}
            noArgs
          />
        </>
      ),
    },
  },
} as Meta<typeof Example>