import {
  Heading as RadixHeading,
  type HeadingProps as RadixHeadingProps,
} from '@radix-ui/themes';
import { useMemo } from 'react';

export { Heading as RadixHeading } from '@radix-ui/themes';

export type HeadingProps = RadixHeadingProps & {
  variant?: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5';
};

export function Heading(props: HeadingProps): React.ReactElement {
  const { size, children, variant, ...rest } = props;
  const radixSize = useMemo<RadixHeadingProps['size']>(() => {
    switch (variant) {
      case 'heading1':
        return '7';
      case 'heading2':
        return '6';
      case 'heading3':
        return '5';
      case 'heading4':
        return '4';
      case 'heading5':
        return '3';
      default:
        return size;
    }
  }, [size, variant]);

  return (
    <RadixHeading {...rest} size={radixSize}>
      {children}
    </RadixHeading>
  );
}
