'use client'
import stateVisiMisiPPID from '@/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID';
import colors from '@/con/colors';
import { Box, Center, Image, Paper, Skeleton, Stack, Text, Divider, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useProxy } from 'valtio/utils';
import { IconSparkles } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';

function Page() {
  const allList = useProxy(stateVisiMisiPPID);
  useShallowEffect(() => {
    allList.findById.load("1");
  }, []);

  if (!allList.findById.data) {
    return (
      <Stack p="xl" gap="sm">
        {Array.from({ length: 6 }).map((_, k) => (
          <Skeleton key={k} h={60} radius="lg" />
        ))}
      </Stack>
    );
  }

  const dataArray = Array.isArray(allList.findById.data)
    ? allList.findById.data
    : [allList.findById.data];

  return (
    <Stack bg={colors.Bg} py="xl" gap={40}>
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>

      {dataArray.map((item) => (
        <Box key={item.id} px={{ base: 'md', md: 100 }}>
          <Transition mounted={true} transition="fade" duration={500} timingFunction="ease">
            {(styles) => (
              <Paper
                style={styles}
                p={{ base: 'lg', md: 'xl' }}
                radius="2xl"
                shadow="xl"
                bg={colors['white-trans-1']}
                withBorder
              >
                <Stack gap="xl">
                  <Box>
                    <Center mb="md">
                      <Image src="/darmasaba-icon.png" w={{ base: 80, md: 130 }} alt="Logo Desa Darmasaba" loading='lazy' />
                    </Center>
                    <Text
                      ta="center"
                      fz={{ base: 28, md: 36 }}
                      fw={800}
                      variant="gradient"
                      gradient={{ from: colors['blue-button'], to: 'cyan', deg: 45 }}
                    >
                      Moto PPID Desa Darmasaba
                    </Text>
                    <Text ta="center" fz={{ base: 16, md: 20 }} mt="xs" c="dimmed">
                      Memberikan informasi yang cepat, mudah, tepat, dan transparan
                    </Text>
                  </Box>

                  <Divider my="sm" labelPosition="center" label={<IconSparkles size={18} />} />

                  <Box>
                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
                      Visi PPID
                    </Text>
                    <Text
                      fz={{ base: 'md', md: 'lg' }}
                      lh={1.7}
                      ta="justify"
                      dangerouslySetInnerHTML={{ __html: item.visi }}
                    />
                  </Box>

                  <Divider my="sm" />

                  <Box>
                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
                      Misi PPID
                    </Text>
                    <Text
                      fz={{ base: 'md', md: 'lg' }}
                      lh={1.7}
                      ta="justify"
                      dangerouslySetInnerHTML={{ __html: item.misi }}
                    />
                  </Box>
                </Stack>
              </Paper>
            )}
          </Transition>
        </Box>
      ))}
    </Stack>
  );
}

export default Page;