import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
import { colors, radii, spacing } from '../../constants/theme';
import { Icon } from './Icon';

type Props = {
  label: string;
  onPress: () => void;
  icon?: string;
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  loading?: boolean;
  disabled?: boolean;
};

export function AppButton({
  label,
  onPress,
  icon,
  variant = 'primary',
  loading,
  disabled,
}: Props) {
  const isPrimary = variant === 'primary';
  const isSecondary = variant === 'secondary';
  const isDanger = variant === 'danger';
  const isGhost = variant === 'ghost';

  const bg = isPrimary
    ? colors.primary
    : isDanger
      ? colors.danger
      : isGhost
        ? 'transparent'
        : colors.surface;
  const textColor = isPrimary || isDanger ? '#fff' : isGhost ? colors.primary : colors.text;
  const borderColor = isSecondary
    ? colors.border
    : isGhost
      ? colors.primary
      : isPrimary
        ? colors.primary
        : isDanger
          ? colors.danger
          : colors.border;

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled || loading}
      style={({ pressed }) => [
        styles.btn,
        {
          backgroundColor: bg,
          borderColor,
          opacity: pressed || disabled ? 0.88 : 1,
        },
        (isSecondary || isGhost) && styles.outlined,
      ]}
    >
      {loading ? (
        <ActivityIndicator color={textColor} />
      ) : (
        <View style={styles.row}>
          {icon ? <Icon name={icon} size={18} color={textColor} /> : null}
          <Text style={[styles.label, { color: textColor }]}>{label}</Text>
        </View>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  btn: {
    alignItems: 'center',
    borderRadius: radii.sm,
    borderWidth: 1,
    justifyContent: 'center',
    minHeight: 46,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
  },
  outlined: {
    borderWidth: 1,
  },
  row: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
  label: { fontSize: 15, fontWeight: '700' },
});