import { Pressable, StyleSheet, Text } from 'react-native';

import { colors } from '../utils/constants';

export default function PrimaryButton({ label, onPress, disabled = false, tone = 'default' }) {
  return (
    <Pressable
      accessibilityRole="button"
      disabled={disabled}
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        tone === 'light' ? styles.lightButton : null,
        pressed ? styles.buttonPressed : null,
        disabled ? styles.disabled : null
      ]}
    >
      <Text style={[styles.label, tone === 'light' ? styles.lightLabel : null, disabled ? styles.disabledLabel : null]}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: colors.primary,
    borderRadius: 14,
    justifyContent: 'center',
    minHeight: 50,
    paddingHorizontal: 20,
    paddingVertical: 14
  },
  buttonPressed: {
    opacity: 0.82
  },
  lightButton: {
    backgroundColor: colors.surface
  },
  label: {
    color: colors.surface,
    fontSize: 16,
    fontWeight: '800'
  },
  lightLabel: {
    color: colors.primaryDark
  },
  disabled: {
    backgroundColor: colors.border
  },
  disabledLabel: {
    color: colors.muted
  }
});