import { Pressable, StyleSheet, Text, ViewStyle } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { IconComponent } from "../types/domain";

type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";

interface AppButtonProps {
  label: string;
  onPress: () => void;
  icon?: IconComponent;
  variant?: ButtonVariant;
  compact?: boolean;
  style?: ViewStyle;
}

export function AppButton({
  label,
  onPress,
  icon: Icon,
  variant = "primary",
  compact = false,
  style
}: AppButtonProps) {
  const textColor = variant === "primary" ? colors.surface : colors.primary;

  return (
    <Pressable
      accessibilityRole="button"
      onPress={onPress}
      style={({ pressed }) => [
        styles.base,
        styles[variant],
        compact && styles.compact,
        pressed && styles.pressed,
        style
      ]}
    >
      {Icon ? <Icon color={textColor} size={compact ? 16 : 18} strokeWidth={2.4} /> : null}
      <Text style={[styles.label, { color: textColor }]} numberOfLines={1}>
        {label}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    minHeight: 46,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    gap: spacing.sm,
    paddingHorizontal: spacing.lg
  },
  compact: {
    minHeight: 36,
    paddingHorizontal: spacing.md
  },
  primary: {
    backgroundColor: colors.primary
  },
  secondary: {
    backgroundColor: colors.primarySoft
  },
  outline: {
    borderWidth: 1,
    borderColor: colors.primary,
    backgroundColor: colors.surface
  },
  ghost: {
    backgroundColor: "transparent"
  },
  pressed: {
    opacity: 0.76,
    transform: [{ scale: 0.98 }]
  },
  label: {
    fontSize: 15,
    lineHeight: 18,
    fontWeight: "800"
  }
});