import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { View } from "react-native";
import Text from "../Text";

type Props = {
   dateStart: Date
   year: string
   data: {
      title: string
      timeStart: string
      timeEnd: string
   }[]
}[]

export default function ItemHistoryEvent({ data }: { data: Props }) {
   return (
      <>
         {
            data.length > 0 ? (
               data.map((item, index) => (
                  <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
                     <View style={[Styles.mr10, Styles.ph05]}>
                        <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
                        <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
                     </View>
                     <View style={[{ flex: 1 }]}>
                        {
                           item.data.map((item2, index2) => (
                              <View key={index2} style={[Styles.mb05, Styles.w80]}>
                                 <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item2.title}</Text>
                                 <Text style={[Styles.textDefault]}>{item2.timeStart} | {item2.timeEnd}</Text>
                              </View>
                           ))
                        }
                     </View>
                  </View>
               ))
            ) : (
               <View style={[Styles.p15]}>
                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
               </View>
            )
         }
      </>
   )
}