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

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

export const Basic = (): React.JSX.Element => {
  const isTouchDevice = useTouchDeviceDetection()

  return (
    <div>
      <span className='text-sm'>
        The shows whether the device you are using is a touch device or not.
      </span>
      <OutputForDemo
        output={
          <span>
            Am I using a touch device? <b>{isTouchDevice ? 'Yes' : 'No'}</b>
          </span>
        }
      />
    </div>
  )
}
Basic.storyName = 'useTouchDeviceDetection'
Basic.args = {}

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

              const containerDimensions = useTouchDeviceDetection()

              Output: boolean
            `}
            description='A hook used to detect if the device you are using is a touch device or not. This hook will return a boolean value of true or false.'
            noArgs
          />
        </>
      ),
    },
  },
} as Meta<typeof Basic>