import { Skeleton, SkeletonImg } from '../../styles/Components';
import { styled } from 'styled-components';

export const UserInfoSkeleton = () => {
	return (
		<>
			<UserDefault>
				<ProfileWrapper>
					<SkeletonImg width="200px" height="150px" />
				</ProfileWrapper>
				<UserInfoTable>
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
					<Skeleton width="530px" height="30px" />
				</UserInfoTable>
			</UserDefault>
			<UserInfoTable>
				<Skeleton width="750px" height="30px" />
				<Skeleton width="750px" height="30px" />
				<Skeleton width="750px" height="30px" />
				<Skeleton width="750px" height="30px" />
			</UserInfoTable>
		</>
	)
}

const UserDefault = styled.div`
	display: flex;
	gap: 40px;
	margin-bottom: 30px;
    justify-content: space-between;
`;
const ProfileWrapper = styled.div`
	width: 150px;
	height: 150px;
	border-radius: 75px;
	overflow: hidden;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	background: #fff;
`;

const UserInfoTable = styled.table`
	width: 100%;
	max-width: ${props => props.$maxwidth || 'auto'};
	font-size: 13px;
	border-radius: 15px;
	overflow: hidden;
	flex-grow: 1;
`;
