import { Stack, useTheme } from '@mui/material';

import Accordion from '../../../../design-system/Accordion';
import ListItem from '../../../../design-system/List/components/ListItem';
import { TASKS_ICONS } from '../constants';
import { type ModuleAccordionProps } from '../types';

import ModuleAccordionSkeleton from './skeleton';

const ModuleAccordion = ({ module, loading = false }: ModuleAccordionProps) => {
  const { spacing } = useTheme();

  if (loading) return <ModuleAccordionSkeleton />;

  if (!module) return null;

  return (
    <Accordion
      elevation={1}
      title={module.title}
      avatar={{
        text: module.icon.value ?? null,
        src: module.icon.value ?? null,
        sx: {
          borderRadius: 1,
          '& span': {
            mt: 0.5,
          },
          '& img': {
            maxWidth: spacing(2.5),
            maxHeight: spacing(2.5),
          },
        },
      }}
      customDetail={
        <Stack sx={{ gap: 2 }}>
          {module.tasks.map(task => (
            <ListItem
              key={task.id}
              avatar={{ Icon: TASKS_ICONS[task.type] }}
              text={{ title: task.title }}
              sx={{ '& .MuiListItem-root': { p: 0 } }}
            />
          ))}
        </Stack>
      }
    />
  );
};

export default ModuleAccordion;
