import React, { ReactElement, ReactNode } from 'react';
import {
  fontSizes,
  fontWeights,
  typographyTailwind,
} from '../configs/typography';

interface TypographyTypes {
  as?: keyof HTMLElementTagNameMap | 'pBig' | 'pMid' | 'pSmall';
  weight?: keyof typeof fontWeights;
  theme?: string;
  title: ReactElement | ReactNode | string;
  styledAs?: keyof typeof typographyTailwind;
}

/**
 * Typography Component
 *
 * @param {string} [props.as='p'] - The HTML tag to be used for the underlying element, optional, defaulting to `<p>`.
 * @param {string} [props.weight='normal'] -  The font weight to be used, optional, defaulting to `normal` (400).
 * @param {string} [props.theme=''] - The custom Tailwind CSS classes for styling, optional, defaulting to `''`.
 * @param {React.ReactElement|React.ReactNode|string} props.title - The content of the underlying element, required, no default value.
 *
 * @returns {React.ReactElement} JSX element representing the Typography.
 */
const Typography = ({
  as = 'p',
  weight = 'normal',
  styledAs,
  theme = '',
  title,
}: TypographyTypes): React.ReactElement => {
  const Tag: keyof JSX.IntrinsicElements =
    as === 'pBig' || as === 'pMid' || as === 'pSmall'
      ? 'p'
      : (as.split('-')[0] as keyof JSX.IntrinsicElements);
  const className = styledAs
    ? typographyTailwind[styledAs]
    : `${
        typographyTailwind[
          `${
            Object.keys(fontSizes).includes(as as string) ? as : 'pMid'
          }-${weight}` as keyof typeof typographyTailwind
        ]
      }`;

  return <Tag className={`${className} ${theme}`}>{title}</Tag>;
};

export default Typography;