mobile-darmasaba/components/itemSectionTanggalTugas.tsx

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

type Props = {
   done?: boolean
   title: string
   dateStart: string
   dateEnd: string
   onPress?: () => void
}

export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
   const { colors } = useTheme();

   return (
      <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon, borderBottomWidth: 1 }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter]}>
            {
               done != undefined ?
                  done ?
                     <>
                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                        <Text style={[Styles.cGray]}>Selesai</Text>
                     </>
                     :
                     <>
                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                        <Text style={[Styles.cGray]}>Belum Selesai</Text>
                     </>
                  :
                  <></>
            }

         </View>
         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
            <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
               <MaterialCommunityIcons name="file-table-outline" size={25} color={colors.text} style={[Styles.mr10]} />
               <View style={[Styles.w90]}>
                  <Text style={[Styles.textDefault]}>{title}</Text>
               </View>
            </View>
         </View>
         <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Mulai</Text>
               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                  <Text style={{ textAlign: 'center' }}>{dateStart}</Text>
               </View>
            </View>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                  <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
               </View>
            </View>
         </View>
      </Pressable>
   )
}