import { useI18n } from "@/hooks/use-i18n";
import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

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

const ButtonEndTrip: React.FC<ButtonEndTripProps> = ({ title, onPress }) => {
  const { t } = useI18n();
  const displayTitle = title || t("trip.buttonEndTrip.title");
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={onPress}
      activeOpacity={0.85}
    >
      <Text style={styles.text}>{displayTitle}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#ed9434", // màu cam sáng
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 28,
    alignSelf: "flex-start",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 3,
    shadowOffset: { width: 0, height: 1 },
    elevation: 2, // hiệu ứng nổi trên Android
  },
  text: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
    textAlign: "center",
  },
});

export default ButtonEndTrip;