import { Pressable, Text, StyleSheet, View } from 'react-native';
import { innerBorders, links, texts } from './styles';
import type { ILinkProps } from './types';

export default function Link(props: ILinkProps) {
  const { children, onPress, style, textStyle, variant = 'primary' } = props;
  return (
    <Pressable
      onPress={onPress}
      style={StyleSheet.flatten([links.basic, style])}
    >
      {typeof children === 'string' ||
      typeof (children as string[])?.[0] === 'string' ? (
        <Text
          style={StyleSheet.flatten([texts.basic, texts[variant], textStyle])}
        >
          {children}
        </Text>
      ) : (
        children
      )}
      <View
        style={StyleSheet.flatten([innerBorders.basic, innerBorders[variant]])}
      />
    </Pressable>
  );
}