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

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

const NotificationListItemSkeleton = () => (
  <Stack
    sx={{
      width: '100%',
      p: 2,
      gap: 1,
      flexDirection: 'row',
      alignItems: 'flex-start',
    }}
  >
    <Stack
      sx={{
        gap: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        flex: 1,
        minWidth: 0,
      }}
    >
      <HuSkeleton
        variant="circular"
        width={48}
        height={48}
      />
      <Stack sx={{ flex: 1, minWidth: 0, gap: 0.5 }}>
        <HuSkeleton
          variant="rounded"
          width="70%"
          height={16}
        />
        <HuSkeleton
          variant="rounded"
          width="90%"
          height={16}
        />
        <HuSkeleton
          variant="rounded"
          width={72}
          height={14}
          sx={{ mt: 0.5 }}
        />
      </Stack>
    </Stack>
  </Stack>
);

export default NotificationListItemSkeleton;
