import React from 'react';
import { Meta } from '@storybook/react';
import { typographyTailwind } from '../components/configs/typography';
import Typo from '../components/Typography/Typography';

export default {
  title: 'Utils / Typography',
  component: Typo,
} as Meta;

export const Typography = () => (
  <section className="flex flex-col divide-y divide-solid">
    {Object.keys(typographyTailwind).map((key) => (
      <div key={key} className="py-4">
        <Typo
          as={key.split('-')[0] as keyof HTMLElementTagNameMap}
          weight={
            key.includes('bold')
              ? 'bold'
              : key.includes('semi')
              ? 'semi'
              : 'normal'
          }
          title={`.${key}. The qucik brown fox jumps over the lazy dog.`}
          theme=""
        />
      </div>
    ))}
  </section>
);