import {
  Link as RadixLink,
  type LinkProps as RadixLinkProps,
} from '@radix-ui/themes';
import { useMemo } from 'react';

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

export type LinkProps = RadixLinkProps & {
  variant?: 'caption' | 'body' | 'subtitle';
};

export function Link(props: LinkProps): React.ReactElement {
  const { size, children, variant, ...rest } = props;
  const radixSize = useMemo<RadixLinkProps['size']>(() => {
    switch (variant) {
      case 'caption':
        return '1';
      case 'body':
        return '2';
      case 'subtitle':
        return '3';
      default:
        return size;
    }
  }, [size, variant]);

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