import React from 'react'

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

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

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

const fontWeightMap = [
  { label: 'Regular', tw: 'font-normal', value: 400 },
  { label: 'Medium', tw: 'font-medium', value: 500 },
  { label: 'Semi-Bold', tw: 'font-semibold', value: 600 },
  { label: 'Bold', tw: 'font-bold', value: 700 },
]

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

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