import React from 'react'

import {
  HelperClassExample,
  HelperClassTemplate,
} from '../../CSS/HelperClassTemplate'

export default {
  title: 'CSS Helper Classes/Fonts/Font Sizes',
  parameters: {
    docs: {
      page: () => <HelperClassTemplate />,
    },
  },
} as Record<string, unknown>

const Template = (args) => (
  <HelperClassExample examples={args.fontValues} fonts singleColumn />
)

const fontSizeMap = [
  { px: 10, tw: 'text-2xs' },
  { px: 12, tw: 'text-xs' },
  { px: 14, tw: 'text-sm' },
  { px: 16, tw: 'text-base' },
  { px: 18, tw: 'text-lg' },
  { px: 22, tw: 'text-2xl' },
]

const fontValuesArr = fontSizeMap.map(({ px, tw }) => {
  return {
    groupName: `Font Size ${px}px`,
    arr: [
      {
        label: tw,
        children: <div className={tw}>Font Size ({px}px)</div>,
      },
    ],
  }
})

export const fontSizes = Template.bind({})
fontSizes.args = {
  fontValues: fontValuesArr,
}
fontSizes.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
  viewMode: 'docs',
}