import { forwardRef, memo, type ComponentRef, type ComponentPropsWithoutRef } from 'react';
import { Text } from 'react-native';
import { cn } from '@cdx-ui/utils';
import { headingStyle, type HeadingVariantProps } from './styles';

const sizeToLevel = {
  xl: 1,
  lg: 2,
  md: 3,
  sm: 4,
  xs: 5,
} as const;

export type HeadingProps = HeadingVariantProps &
  ComponentPropsWithoutRef<typeof Text> & {
    className?: string;
  };

export const Heading = memo(
  forwardRef<ComponentRef<typeof Text>, HeadingProps>(function Heading(
    { className, size = 'lg', ...props },
    ref,
  ) {
    return (
      <Text
        role="heading"
        aria-level={sizeToLevel[size ?? 'lg']}
        className={cn(headingStyle({ size }), className)}
        {...props}
        ref={ref}
      />
    );
  }),
);

Heading.displayName = 'Heading';