Khởi tạo ban đầu

components/ButtonCancelTrip.tsx

@@ -0,0 +1,48 @@
+import { useI18n } from "@/hooks/use-i18n";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+interface ButtonCancelTripProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonCancelTrip: React.FC<ButtonCancelTripProps> = ({
+  title,
+  onPress,
+}) => {
+  const { t } = useI18n();
+  const displayTitle = title || t("trip.buttonCancelTrip.title");
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      <Text style={styles.text}>{displayTitle}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#f45b57", // đỏ nhẹ giống ảnh
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2, // cho Android
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
+
+export default ButtonCancelTrip;