import { Skeleton, TableWrapper } from '../../styles/Components';
import { Fragment } from 'react';
import { styled } from 'styled-components';

export const PageSkeleton = ({width = '100%', count = 8}) => {
	return (
		<>
			<Skeleton width={width} height="40px" />
			<SearchbarStyle>
				<Skeleton width={width} height="80px" />
			</SearchbarStyle>
			<Skeleton width={width} height="40px" />
			<TableWrapper>
				{Array.from({ length: count }).map((_, index) => (
					<Skeleton key={index} width={width} height="40px" />
				))}
			</TableWrapper>

		</>
	)
}

const SearchbarStyle = styled.div`
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin: 0 0 40px;
	flex-flow: ${props => props.direction};
	gap: ${props => (props.direction === 'column' ? '20px' : '20px 0')};
`;
