import Styles from "@/constants/Styles";
import { Dimensions, Text, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";

export default function ReportChartEvent() {
   const width = Dimensions.get("window").width;
   const barData = [
      { value: 23, label: 'Akan Datang', frontColor: 'gray' },
      { value: 12, label: 'Selesai', frontColor: '#177AD5' },
   ];

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>ACARA DIVISI</Text>
         <BarChart
            showFractionalValues={false}
            showYAxisIndices
            noOfSections={4}
            maxValue={25}
            data={barData}
            isAnimated
            width={width - 140}
            barWidth={width * 0.25}
            renderTooltip={(item: any, index: any) => {
               return (
                  <View
                     style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: width * 0.25
                     }}>
                     <Text>{item.value}</Text>
                  </View>
               );
            }}
         />
      </View>
   )
}