import React from "react";
import { Pressable, type PressableProps, StyleSheet } from "react-native";
import { Theme } from "../../theme/theme";
import AppText from "./AppText";

type Props = PressableProps & {
  title: string;
  variant?: "primary" | "secondary";
};

export default function Button({
  title,
  variant = "primary",
  style,
  disabled,
  ...props
}: Props) {
  const isPrimary = variant === "primary";

  return (
    <Pressable
      {...props}
      disabled={disabled}
      style={({ pressed }) => [
        styles.base,
        isPrimary ? styles.primary : styles.secondary,

        // pressed 스타일(비활성화면 적용 안 함)
        !disabled &&
          pressed &&
          (isPrimary ? styles.primaryPressed : styles.secondaryPressed),

        // disabled 스타일
        disabled && styles.disabled,

        typeof style === "function" ? style({ pressed }) : style,
      ]}
    >
      <AppText
        style={[
          styles.text,
          isPrimary ? styles.textPrimary : styles.textSecondary,
          disabled && styles.textDisabled,
        ]}
      >
        {title}
      </AppText>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    paddingVertical: Theme.Spacing.md,
    borderRadius: Theme.Radius.md,
    alignItems: "center",
    justifyContent: "center",
    minHeight: 48,
  },
  primary: {
    backgroundColor: Theme.Colors.primary,
  },
  primaryPressed: {
    backgroundColor: Theme.Colors.primaryPressed,
  },
  secondary: {
    backgroundColor: Theme.Colors.surface,
    borderWidth: 1,
    borderColor: Theme.Colors.border,
  },
  secondaryPressed: {
    opacity: 0.9,
  },

  disabled: {
    opacity: 0.5,
  },

  text: {
    textAlign: "center",
    fontWeight: Theme.FontWeight.bold,
  },
  textPrimary: {
    color: Theme.Colors.text,
  },
  textSecondary: {
    color: Theme.Colors.text,
  },
  textDisabled: {
    color: Theme.Colors.mutedText,
  },
});