import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import { Paper, Skeleton, Stack } from '@/mui/components';

import styles from './index.module.scss';

function PlaceholderComponent({ onMount = null }) {
  useEffect(() => {
    if (onMount) {
      onMount();
    }
  }, []);

  return (
    <Stack spacing={5}>
      {new Array(10).fill(0).map((_, index) => {
        const placeholder = `placeholder-${index}`;

        return (
          <Stack
            key={placeholder}
            component={Paper}
            direction="row"
            spacing={2}
            elevation={1}
            alignItems="stretch"
            className={styles.Item}
          >
            <div>
              <Skeleton width={248} height={138} variant="rounded" />
            </div>
            <Stack spacing={2} fullWidth>
              <Skeleton width="90%" variant="rounded" height={20} />
              <Skeleton width="70%" variant="rounded" height={14} />
              <Skeleton width="100%" height="100%" variant="rounded" />
            </Stack>
          </Stack>
        );
      })}
    </Stack>
  );
}

PlaceholderComponent.propTypes = {
  onMount: PropTypes.func,
};

export default PlaceholderComponent;
