instructions

import { Box, Checkbox, FormControlLabel, Skeleton, Typography } from '@mui/material';
import { PortableText, PortableTextProps } from '@portabletext/react';
import { useQuery } from '@tanstack/react-query';

interface InstructionsProps {
  keyword: string;
}

const Instructions = ({ keyword }: InstructionsProps) => {
  const { data, isLoading } = useQuery<{
    result: { _id: string; html: PortableTextProps['value'] }[];
  }>({
    queryKey: [
      '/Molo/Handler.Sanity.ashx',
      { query: `*[_type == "instruction" && "${keyword}" == keyword]` },
      'postForm',
    ],
  });

  const instruction = data?.result?.[0];

  return (
    <Box sx={{ border: 1, borderColor: '#C7C8CA8F', p: 4 }}>
      {isLoading && (
        <Box className="space-y-2">
          {Array.from({ length: 3 }).map((_, index) => (
            <Skeleton variant="text" key={index} />
          ))}
        </Box>
      )}
      {instruction?.html && (
        <Box sx={{ '& ul': { m: 0, pl: 0.5 } }}>
          <PortableText
            components={{
              listItem: {
                bullet: ({ children }) => (
                  <Box>
                    <FormControlLabel
                      componentsProps={{
                        typography: {
                          color: 'text.darkGray',
                          variant: 'inherit',
                          fontWeight: 500,
                        },
                      }}
                      control={<Checkbox size="small" sx={{ p: 0.7, mr: 2 }} />}
                      label={children}
                    />
                  </Box>
                ),
              },
            }}
            value={instruction.html}
          />
        </Box>
      )}
    </Box>
  );
};

export default Instructions;