import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import DraftPermissionsHeader from './PostDraftHeader';

const PostDraftSkeleton = () => {
  return (
    <HuTableContainer sx={{ width: '100%' }}>
      <HuTable>
        <DraftPermissionsHeader />
        <HuTableBody>
          {Array.from({ length: 4 }, (n, i) => (
            <HuTableRow key={i}>
              <HuTableCell
                component="th"
                scope="row"
              >
                <HuSkeleton
                  isLoading
                  width="70%"
                />
              </HuTableCell>
              <HuTableCell
                component="th"
                scope="row"
              >
                <HuSkeleton
                  isLoading
                  width="60%"
                />
              </HuTableCell>
              <HuTableCell
                component="th"
                scope="row"
              >
                <HuSkeleton
                  isLoading
                  width="70%"
                />
              </HuTableCell>
              <HuTableCell
                component="th"
                scope="row"
              >
                <HuSkeleton
                  isLoading
                  width="50%"
                />
              </HuTableCell>
            </HuTableRow>
          ))}
        </HuTableBody>
      </HuTable>
    </HuTableContainer>
  );
};
export default PostDraftSkeleton;
