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

import { Colors, Radius, Spacing } from '@/constants/theme';

type Props = PropsWithChildren<{
  onPress?: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  accessibilityLabel: string;
}>;

export function ActionButton({ children, onPress, variant = 'primary', accessibilityLabel }: Props) {
  return (
    <Pressable
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="button"
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        styles[variant],
        pressed && styles.pressed,
      ]}>
      <Text style={[styles.text, variant !== 'primary' && styles.secondaryText]}>{children}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 48,
    borderRadius: Radius.md,
    paddingHorizontal: Spacing.four,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
  primary: {
    backgroundColor: Colors.light.primary,
    borderColor: Colors.light.primary,
  },
  secondary: {
    backgroundColor: '#FFFFFF',
    borderColor: Colors.light.border,
  },
  danger: {
    backgroundColor: '#FFFFFF',
    borderColor: Colors.light.danger,
  },
  text: {
    color: '#FFFFFF',
    fontSize: 15,
    fontWeight: '900',
  },
  secondaryText: {
    color: Colors.light.text,
  },
  pressed: {
    opacity: 0.76,
  },
});
