import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

interface ButtonCancelTripProps {
  title?: string;
  onPress?: () => void;
}

const ButtonCancelTrip: React.FC<ButtonCancelTripProps> = ({
  title = "Hủy chuyến đi",
  onPress,
}) => {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <Text style={styles.text}>{title}</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;