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

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

import { approvalTabs } from '../../../constants';

type ApprovalItemSkeletonProps = {
  tab: string;
};

const ApprovalItemSkeleton = ({ tab }: ApprovalItemSkeletonProps) => {
  return (
    <HuCardContainer
      fullWidth
      padding={0}
    >
      <Stack
        sx={{
          p: 2,
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        <Stack sx={{ gap: 0.5 }}>
          <HuSkeleton
            height={12}
            width={50}
          />
          <HuSkeleton
            height={18}
            width={220}
          />
          <HuSkeleton
            height={15}
            width={250}
          />
        </Stack>
        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
          {tab === approvalTabs.pending && (
            <HuSkeleton
              height={25}
              width={140}
            />
          )}
          <HuSkeleton
            height={25}
            width={140}
          />
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default ApprovalItemSkeleton;
