import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { View } from "react-native";
import Text from "./Text";

type Props = {
   text?: string
   title?: string
}

export default function SectionCancel({ text, title }: Props) {
   const { colors } = useTheme();

   return (
      <View style={[
         Styles.wrapPaper,
         Styles.mb15,
         Styles.sectionCard,
         { backgroundColor: colors.error + '12', borderColor: colors.error + '40' },
      ]}>
         <View style={[Styles.sectionHeader, !text && { marginBottom: 0 }]}>
            <View style={[Styles.sectionIconBox, Styles.mr10, { backgroundColor: colors.error + '20' }]}>
               <MaterialCommunityIcons name="close-circle-outline" size={18} color={colors.error} />
            </View>
            <Text style={[Styles.textDefaultSemiBold, { color: colors.error }]}>
               {title ?? 'Kegiatan Dibatalkan'}
            </Text>
         </View>

         {text && (
            <View style={[Styles.reportContent, { borderLeftColor: colors.error + '50' }]}>
               <Text style={[Styles.textDefault, { color: colors.text }]}>{text}</Text>
            </View>
         )}
      </View>
   )
}