desa-darmasaba/src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPendudukNonPermanent.tsx

/* eslint-disable react-hooks/exhaustive-deps */
"use client";

import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
import colors from '@/con/colors';
import { ActionIcon, Box, Divider, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';

function PelayananPendudukNonPermanent() {
  const state = useProxy(stateLayananDesa);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true);
        await state.pelayananPendudukNonPermanen.findById.load('edit');
      } catch (error) {
        console.error('Gagal memuat data:', error);
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, []);

  const data = state.pelayananPendudukNonPermanen.findById.data;

  return (
    <Box py="lg">
      {loading ? (
        <Stack gap="lg">
          <Skeleton height={40} radius="md" />
          <Skeleton height={200} radius="md" />
          <Skeleton height={30} radius="md" />
        </Stack>
      ) : (
        <Stack gap="xl">
          <Box>
            <Text fz={{ base: "xl", md: "2xl" }} fw={700} lh={1.3} c="dark">
              {data?.name || "Judul belum tersedia"}
            </Text>
          </Box>

          <Box>
            {data?.deskripsi ? (
              <Text
                fz={{ base: "sm", md: "md" }}
                lh={1.7}
                ta="justify"
                c="dimmed"
                dangerouslySetInnerHTML={{ __html: data?.deskripsi }}
                style={{wordBreak: "break-word", whiteSpace: "normal"}}
              />
            ) : (
              <Text fz="sm" c="gray">Deskripsi belum tersedia.</Text>
            )}
          </Box>

          <Divider color={colors["blue-button"]} size="sm" />

          <Flex justify="space-between" align="center" wrap="wrap" gap="md">
            <Text fz={{ base: "xs", md: "sm" }} c="dimmed">
              25 Mei 2021 • Darmasaba
            </Text>
            <Group gap="md">
              <Tooltip label="Bagikan ke Facebook" withArrow>
                <ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
                  <IconBrandFacebook size={24} />
                </ActionIcon>
              </Tooltip>
              <Tooltip label="Bagikan ke Instagram" withArrow>
                <ActionIcon size="lg" radius="xl" variant="subtle" color="pink">
                  <IconBrandInstagram size={24} />
                </ActionIcon>
              </Tooltip>
              <Tooltip label="Bagikan ke Twitter" withArrow>
                <ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
                  <IconBrandTwitter size={24} />
                </ActionIcon>
              </Tooltip>
              <Tooltip label="Bagikan ke WhatsApp" withArrow>
                <ActionIcon size="lg" radius="xl" variant="subtle" color="green">
                  <IconBrandWhatsapp size={24} />
                </ActionIcon>
              </Tooltip>
            </Group>
          </Flex>

          <Divider color={colors["blue-button"]} size="sm" />
        </Stack>
      )}
    </Box>
  );
}

export default PelayananPendudukNonPermanent;