import { Pressable, Text, StyleSheet, View } from 'react-native';
import { variants, variantTexts, innerBorders } from '../common/styles';
import type { IButtonProps } from './types';

export default function Button(props: IButtonProps) {
  const {
    children,
    innerBorderStyle,
    onPress,
    size = 'medium',
    style,
    textStyle,
    variant = 'primary',
  } = props;
  return (
    <Pressable
      onPress={onPress}
      style={StyleSheet.flatten([variants.basic, variants[variant], style])}
    >
      <View
        style={StyleSheet.flatten([
          variants[size],
          innerBorders.basic,
          innerBorders[variant],
          innerBorderStyle,
        ])}
      >
        {typeof children === 'string' ||
        typeof (children as string[])?.[0] === 'string' ? (
          <Text
            style={StyleSheet.flatten([
              variantTexts.basic,
              variantTexts[variant],
              textStyle,
            ])}
          >
            {children}
          </Text>
        ) : (
          children
        )}
      </View>
    </Pressable>
  );
}