import React from 'react';
import {Pressable} from 'react-native';
import {IconArrowRight} from '@tabler/icons-react-native';
import {Typography, TypographyProps} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends TypographyProps {
  withIcon?: boolean;
  disabled?: boolean;
  white?: boolean;
  onPress?: () => void;
}

export function Link({
  children,
  withIcon,
  disabled,
  white,
  style,
  onPress,
  ...props
}: Props) {
  const {theme, iconSizes} = useTheme();
  const color = disabled
    ? theme.text.neutral.disabled
    : white
    ? theme.text.neutral.inverted
    : theme.button.background.primary.default;

  return (
    <Pressable onPress={onPress} style={styles.container}>
      <Typography style={[styles.text, {color}, style]} {...props}>
        {children}
      </Typography>
      {withIcon && <IconArrowRight color={color} size={iconSizes.x4} />}
    </Pressable>
  );
}
