import type { TextProps as RadixTextProps } from '@radix-ui/themes';
import { Text as RadixText } from '@radix-ui/themes';
import React, { useMemo, forwardRef } from 'react';

export type TypoProps = RadixTextProps & {
  variant?: 'body' | 'caption' | 'subtitle';
};

export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
  (props: TypoProps, ref): React.ReactNode => {
    const { size, variant, children, ...rest } = props;

    const radixSize = useMemo<RadixTextProps['size']>(() => {
      if (size !== undefined) return size;
      switch (variant) {
        case 'caption':
          return '1';
        case 'subtitle':
          return '3';
        case 'body':
        default:
          return '2';
      }
    }, [size, variant]);

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

Typo.displayName = 'Typo';
