import React, {PropsWithChildren} from 'react';
import {TouchableOpacity, View} from 'react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends PropsWithChildren {
  name: string;
  onPress: () => void;
}

function UploadButton({name, children, onPress}: Props) {
  const {theme} = useTheme();

  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <View
        style={[
          styles.iconContainer,
          {backgroundColor: theme.background.layout.brand},
        ]}>
        {children}
      </View>
      <Typography numberOfLines={1}>{name}</Typography>
    </TouchableOpacity>
  );
}

export default UploadButton;