import { Stack } from '@material-hu/mui/index';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';

export const SessionDetailSkeleton = () => {
  return (
    <Stack sx={{ gap: 3, flexDirection: 'row', width: '100%' }}>
      <Stack sx={{ gap: 2, width: '100%' }}>
        {/* Left Top Card */}
        <CardContainer
          fullWidth
          sx={{
            '& .MuiCardContent-root': {
              flexDirection: 'column',
              display: 'flex',
              gap: 1.5,
            },
          }}
        >
          <Skeleton
            height={32}
            width={100}
          />
          <Skeleton
            height={20}
            width={142}
          />
          <Skeleton
            height={32}
            width="80%"
          />
          <Skeleton
            height={16}
            width="100%"
          />
          <Skeleton
            height={16}
            width="100%"
          />
          <Skeleton
            height={16}
            width="60%"
          />
        </CardContainer>
        {/* Left Middle Card */}
        <CardContainer
          fullWidth
          sx={{
            '& .MuiCardContent-root': {
              flexDirection: 'column',
              display: 'flex',
              gap: 1.5,
            },
          }}
        >
          <Skeleton
            height={20}
            width={70}
          />
          {Array.from({ length: 3 }).map((_, index) => (
            <Stack
              key={index}
              sx={{ gap: 1, flexDirection: 'row', alignItems: 'center' }}
            >
              <Skeleton
                height={16}
                width={16}
                variant="circular"
              />
              <Skeleton
                height={16}
                width={100 + index * 30}
              />
            </Stack>
          ))}
        </CardContainer>
        {/* Left Bottom Card */}
        <CardContainer
          fullWidth
          sx={{
            '& .MuiCardContent-root': {
              flexDirection: 'column',
              display: 'flex',
              gap: 1.5,
            },
          }}
        >
          <Skeleton
            height={20}
            width={70}
          />
          <Stack sx={{ gap: 1, flexDirection: 'row', alignItems: 'center' }}>
            <Skeleton
              height={40}
              width={40}
              variant="circular"
            />
            <Skeleton
              height={16}
              width={200}
            />
          </Stack>
        </CardContainer>
      </Stack>
      <Stack sx={{ width: '100%', maxWidth: 415 }}>
        <CardContainer
          fullWidth
          sx={{ border: 'none' }}
        >
          <Skeleton
            height={384}
            width={384}
          />
          <CardContainer
            fullWidth
            sx={{
              mt: 1.5,
              '& .MuiCardContent-root': {
                flexDirection: 'column',
                display: 'flex',
                gap: 1.5,
              },
            }}
          >
            <Skeleton
              height={20}
              width={67}
            />
            <Skeleton
              height={16}
              width="100%"
            />
            <Skeleton
              height={16}
              width="100%"
            />
            <Skeleton
              height={46}
              width="100%"
            />
          </CardContainer>
        </CardContainer>
      </Stack>
    </Stack>
  );
};