'use client'
import colors from '@/con/colors';
import { Box, Button, Container, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconClipboardText } from '@tabler/icons-react';
import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
import { useRouter } from 'next/navigation';

const data = [
  {
    judul: "PENGUATAN TATA LAKSANA",
    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
    link: "/darmasaba/desa-anti-korupsi/penguatan-tata-laksana"
  },
  {
    judul: "PENGUATAN PENGAWASAN",
    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
    link: "/darmasaba/desa-anti-korupsi/penguatan-pengawasan"
  },
  {
    judul: "PENGUATAN KUALITAS PELAYANAN PUBLIK",
    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
    link: "/darmasaba/desa-anti-korupsi/penguatan-kualitas-pelayanan-publik"
  },
  {
    judul: "PENGUATAN PARTISIPASI MASYARAKAT",
    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
    link: "/darmasaba/desa-anti-korupsi/penguatan-partisipasi-masyarakat"
  },
  {
    judul: "KEARIFAN LOKAL",
    icon: <IconClipboardText size={100} color={colors["blue-button"]} />,
    link: "/darmasaba/desa-anti-korupsi/kearifan-lokal"
  }
]
function Page() {
  const router = useRouter();
  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
      <Container w={{ base: "100%", md: "50%" }}>
        <Stack align="center" gap={0}>
          <Text fz={"3.4rem"} fw={"bold"}>
            Desa Anti Korupsi
          </Text>
          <Text
            py={10}
            ta={"justify"}
          >
            Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan. Adapun beberapa tata penguatan :
          </Text>
        </Stack>
      </Container>
      <SimpleGrid
        px={{ base: "md", md: 100 }}
        cols={{
          base: 1,
          sm: 2,

        }}>
        {data.map((v, k) => {
          return (
            <Box
              key={k}
            >
              <Paper p={"lg"} >
                <Box >
                  <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
                  <Stack justify={"space-between"} align={"center"}>
                    <Box>
                      {v.icon}
                    </Box>
                    <Button fz={"h4"} color={colors["blue-button"]} onClick={() => router.push("/darmasaba/desa-anti-korupsi/detail")}>Detail</Button>
                  </Stack>
                </Box>
              </Paper>
            </Box>
          )
        })}
      </SimpleGrid>
    </Stack>
  );
}

export default Page;