import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import React, {FC} from 'react';
import {ColorsScheme, useTheme} from '../../theme/ThemeContext';
import PlayyText from '../PlayyText/PlayyText';
interface ButtonProps {
  name: string;
  handlePressButton: () => void;
  textColor?: string;
  containerStyle?: ViewStyle;
}
const Button: React.FC<ButtonProps> = ({
  name,
  handlePressButton,
  textColor,
  containerStyle,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={[styles.container, containerStyle]}
      onPress={handlePressButton}>
      <PlayyText
        BodyEmphasized
        color={textColor ? textColor : colors.colors_blue}>
        {name}
      </PlayyText>
    </TouchableOpacity>
  );
};

export default Button;

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors.fill_tertiary,
      borderRadius: 12,
      paddingVertical: 14,
      paddingHorizontal: 16,
    },
  });