import { Card, Skeleton, Stack } from '@mui/material'

export function FeedSkeleton() {
  return (
    <>
      {[1, 2, 3].map(i => (
        <Card key={i} sx={{ p: 2.5, mb: 1.5 }}>
          <Stack direction="row" sx={{ justifyContent: 'space-between', mb: 1.5 }}>
            <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
              <Skeleton variant="rounded" width={110} height={22} />
              <Skeleton variant="text" width={160} sx={{ fontSize: '1.25rem' }} />
            </Stack>
            <Skeleton variant="text" width={60} sx={{ fontSize: '2rem' }} />
          </Stack>
          <Skeleton variant="text" width="70%" />
          <Skeleton variant="text" width="50%" />
          <Skeleton variant="rounded" height={32} sx={{ mt: 1.5 }} />
        </Card>
      ))}
    </>
  )
}
