import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItemSkeleton from '@material-hu/components/design-system/List/components/ListItemSkeleton';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';

export const InfoCardSkeleton: FC = () => {
  return (
    <Stack
      sx={{
        width: '100%',
        gap: { xs: 1, md: 2 },
        padding: 3,
      }}
    >
      <Stack
        sx={{
          width: '100%',
          flexDirection: { xs: 'column', md: 'row' },
          justifyContent: 'space-between',
          gap: 4,
        }}
      >
        <Stack sx={{ gap: 1 }}>
          <HuSkeleton
            width={160}
            height={20}
            sx={{ borderRadius: 0.5 }}
          />

          <HuSkeleton
            width={130}
            height={42}
            sx={{ borderRadius: 0.5 }}
          />
          <HuSkeleton
            width={315}
            height={25}
            sx={{ borderRadius: 0.5 }}
          />
        </Stack>

        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            flex: 1,
            alignItems: 'center',
          }}
        >
          <HuSkeleton
            width={130}
            height={36}
          />
          <HuSkeleton
            width={105}
            height={36}
          />
        </Stack>
      </Stack>

      <Stack
        sx={{
          gap: 2,
          flexDirection: { xs: 'column', md: 'row' },
          width: '100%',
        }}
      >
        <Stack
          sx={{
            flex: 2,
            gap: 2,
          }}
        >
          <HuSkeleton
            width={'100%'}
            height={450}
            sx={{ borderRadius: 1 }}
          />

          <HuCardContainer
            sx={{
              flexDirection: 'column',
              gap: 1,
              minHeight: { xs: 180, md: 230 },
              padding: 2,
              width: '100%',
            }}
          >
            <Stack sx={{ gap: 1, width: '100%' }}>
              <Stack>
                <HuSkeleton
                  width={126}
                  height={22}
                />
              </Stack>

              {Array.from({ length: 3 }, (_, i) => (
                <HuSkeleton
                  key={i}
                  width={300}
                  height={20}
                />
              ))}
              <HuSkeleton
                width={179}
                height={20}
              />

              <HuSkeleton
                width={'100%'}
                height={80}
              />
            </Stack>
          </HuCardContainer>
        </Stack>
        <Stack sx={{ flex: 1 }}>
          <HuCardContainer sx={{ width: '100%' }}>
            <HuSkeleton
              width={180}
              height={22}
            />
            <HuListItemSkeleton />
          </HuCardContainer>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default InfoCardSkeleton;