mobile-darmasaba/components/itemSectionTanggalTugas.tsx

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


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

export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
   return (
      <Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter]}>
            {
               done ?
                  <>
                     <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
                     <Text style={[Styles.cGray]}>Selesai</Text>
                  </>
                  :
                  <>
                     <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
                     <Text style={[Styles.cGray]}>Belum Selesai</Text>
                  </>
            }

         </View>
         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
            <View style={[Styles.rowItemsCenter]}>
               <MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
               <Text style={[Styles.textDefault]}>{title}</Text>
            </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]}>
                  <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]}>
                  <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
               </View>
            </View>
         </View>
      </Pressable>
   )
}