import { LinearGradient } from "expo-linear-gradient";
import { Pressable, StyleSheet, Text } from "react-native";
import { gradients } from "../../theme/gradients";
import { shadows } from "../../theme/shadows";
import { typography } from "../../theme/typography";

export default function AppButton({ title, onPress }: { title: string; onPress: () => void }) {
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [styles.wrapper, pressed && { transform: [{ scale: 0.97 }] }]}>
      <LinearGradient colors={gradients.button} style={styles.button}>
        <Text style={styles.text}>{title}</Text>
      </LinearGradient>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: "60%",
    alignSelf: "center",
    gap: 18,
    borderRadius: 16,
    overflow: "hidden",
    ...shadows.button,
    marginBottom: 20,
  },
  button: {
    paddingVertical: 20,
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "#fff",
    fontFamily: typography.semibold,
    fontSize: typography.sizes.button,
    letterSpacing: 0.5,
  },
});
