import type { TextProps as RadixTextProps } from '@radix-ui/themes';
import type { Responsive } from '@radix-ui/themes/props';
import { Text as RadixText } from '@radix-ui/themes';
import React, { useMemo, forwardRef } from 'react';
import { mapWithResponsive } from '@/utils/map-with-responsive';

export type TypoProps = RadixTextProps & {
  variant?: Responsive<'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;

      if (variant === undefined) return '2';

      return mapWithResponsive({
        value: variant,
        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {
          switch (variantValue) {
            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';
