import { Stack } from '@mui/material';

import Skeleton from '../../../Skeleton';

import { type ListItemSkeletonProps } from './types';

export const ListItemSkeleton = ({ sx }: ListItemSkeletonProps) => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        gap: 0.5,
        p: 2,
        width: '100%',
        ...sx,
      }}
    >
      <Skeleton
        variant="circular"
        width={40}
        height={40}
        sx={{ flexShrink: 0 }}
      />
      <Stack
        sx={{
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          gap: 0.5,
          width: '100%',
        }}
      >
        <Skeleton
          width="100%"
          height="24px"
        />
        <Skeleton
          width="14%"
          height="12px"
        />
      </Stack>
    </Stack>
  );
};

export type { ListItemSkeletonProps };

export default ListItemSkeleton;
