import { LinkProps, TextProps } from 'react-aria-components';
import { Link } from './tw-link';
import { twMerge } from 'tailwind-merge';
import React from 'react';
import { composeTailwindRenderProps } from './tw-utils';

export function Text({ className, elementType, children, ...props }: TextProps) {
  return React.createElement(
    elementType ?? 'p',
    {
      ...props,
      className: twMerge('flex gap-1 pt-1.5 text-xs text-neutral-700', className),
    },
    children,
  );
}

export function Strong({ className, ...props }: JSX.IntrinsicElements['strong']) {
  return (
    <Text
      {...props}
      elementType="strong"
      className={twMerge('text-foreground font-medium', className)}
    />
  );
}

export function Small({ className, ...props }: JSX.IntrinsicElements['small']) {
  return (
    <Text {...props} elementType="small" className={twMerge('text-sm/5 sm:text-xs/5', className)} />
  );
}

export function TextLink(props: LinkProps) {
  return (
    <Link
      {...props}
      className={composeTailwindRenderProps(props.className, 'underline underline-offset-4')}
    />
  );
}