import React from 'react';
import type { ReactNode } from 'react';
import type {
  TextProps as NativeTextProps,
  StyleProp,
  TextStyle,
} from 'react-native';
import { StyledCaption } from './StyledCaption';
import type { TypographyIntent } from '../types';
import { pickAccessibilityProps } from '../utils';
import GradientText from '../GradientText';

export interface CaptionProps extends NativeTextProps {
  /**
   * Text content.
   */
  children: ReactNode;
  /**
   * Font weight of the text.
   */
  fontWeight?: 'regular' | 'medium' | 'semi-bold';
  /**
   * Visual intent color to apply to the text.
   */
  intent?: TypographyIntent;
  /**
   * Additional style.
   */
  style?: StyleProp<TextStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Font style to apply to the text.
   */
  fontStyle?: 'normal' | 'italic';
}

const Caption = ({
  children,
  fontWeight = 'regular',
  intent = 'body',
  allowFontScaling = false,
  fontStyle = 'normal',
  style,
  testID,
  ...nativeProps
}: CaptionProps) => {
  const isAi = intent === 'ai';

  const styledText = (
    <StyledCaption
      {...nativeProps}
      themeFontWeight={fontWeight}
      themeIntent={isAi ? 'body' : intent}
      themeIsItalic={fontStyle === 'italic'}
      allowFontScaling={allowFontScaling}
      style={style}
      testID={testID}
    >
      {children}
    </StyledCaption>
  );

  if (isAi) {
    return (
      <GradientText {...pickAccessibilityProps(nativeProps)}>
        {styledText}
      </GradientText>
    );
  }

  return styledText;
};

export default Caption;