import cc from 'classcat';

type TextSize = 'xl' | 'l' | 'm' | 's' | 'xs';

interface HeadingProps {
  size?: TextSize;
  align?: 'center' | 'justify' | 'left' | 'right';
  weight?: 'bold' | 'semibold';
  overflow?: boolean;
  truncate?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}

const TAGS: Record<TextSize, keyof JSX.IntrinsicElements> = {
  xl: 'h1',
  l: 'h2',
  m: 'h3',
  s: 'h4',
  xs: 'h5',
};

export const Heading = ({
  size = 'm',
  align,
  weight,
  overflow,
  truncate,
  className,
  children,
  ...props
}: HeadingProps) => {
  const cn = cc([
    {
      tac: align === 'center',
      taj: align === 'justify',
      tal: align === 'left',
      tar: align === 'right',

      fz24: size === 'xl',
      fz20: size === 'l',
      fz16: size === 'm',
      fz14: size === 's',
      fz12: size === 'xs',

      bold: weight === 'bold',
      semibold: weight === 'semibold',

      nowrap: overflow === false,
      truncate: truncate === true,
    },
    'margin0',
    className,
  ]);

  const Element = TAGS[size];
  return (
    <Element className={cn} {...props}>
      {children}
    </Element>
  );
};