'use client'
import { WARNA } from "@/module/_global";
import { Box, Card, Flex, Title, Group, Badge, Avatar, Text } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { MdAccountCircle } from "react-icons/md";

const dataProject = [
   // {
   //    id: 4,
   //    title: 'Project 4',
   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
   //    status: 'PROSES',
   //    color: '#C5771A'
   // },
   // {
   //    id: 5,
   //    title: 'Project5',
   //    description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
   //    status: 'PROSES',
   //    color: '#C5771A'
   // },
   {
      id: 6,
      title: 'Divisi Kemasyarakatan',
      total: 12
   },
]
export default function ListDivisi() {
   const router = useRouter()

   return (
      <>
         <Box pt={10}>
            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Terbaru</Text>
            {dataProject.map((v, i) => {
               return (
                  <Box key={i} mb={20} >
                     <Card shadow="sm" padding="md" component="a" radius={10}>
                        <Card.Section>
                           <Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
                              <Flex justify={'center'} align={'center'} h={"100%"}>
                                 <Title order={3} c={WARNA.biruTua}>{_.toUpper(v.title)}</Title>
                              </Flex>
                           </Box>
                        </Card.Section>
                        <Box pt={10}>
                           <Text fw={'bold'} fz={20}>PROYEK</Text>
                           <Text fw={'bolder'} ta={'center'} fz={70}>{v.total}</Text>
                        </Box>
                     </Card>
                  </Box>
               );
            })}
         </Box>
      </>
   )
}