import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import React from "react"
import { View } from "react-native"
import { ButtonFiturMenu } from "../buttonFiturMenu"
import Text from "../Text"

export default function FiturHome() {
   const { colors } = useTheme();
   return (
      <View style={[Styles.mb15]}>
         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
         <View style={[Styles.rowSpaceBetween]}>
            <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
            <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color={colors.icon} />} text="Semua" onPress={() => { router.push('/feature') }} />
         </View>
      </View>
   )
}