import { Fragment } from 'react';

import styled from 'styled-components';

const UserClaimInfo = () => {
	const ListData = [
		{ count: '1', state1: '수령', receipt1: '2023-08-11 09:00', state2: '수령', receipt2: '2023-08-11 09:00' },
		{ count: '2', state1: '수령가능', receipt1: '', state2: '수령가능', receipt2: '' },
		{ count: '3', state1: '수령불가', receipt1: '', state2: '수령불가', receipt2: '' },
	];
	return (
		<>
			<NoContent>진행중인 클레임이 없습니다.</NoContent>
			<UserTableWrapper>
				<ClaimTable>
					<colgroup>
						<col width="80" />
						<col width="170" />
						<col width="170" />
						<col width="170" />
						<col width="170" />
					</colgroup>
					<thead>
						<tr>
							<th>분류</th>
							<th colSpan="2">everyone</th>
							<th colSpan="2">member</th>
						</tr>
						<tr>
							<th>회차</th>
							<th>상태</th>
							<th>수령시간</th>
							<th>상태</th>
							<th>수령시간</th>
						</tr>
					</thead>
					<tbody>
						{ListData.map((el, idx) => {
							return (
								<Fragment key={idx}>
									<tr>
										<td>{el.count}</td>
										<td>{el.state1}</td>
										<td>{el.receipt1}</td>
										<td>{el.state2}</td>
										<td>{el.receipt2}</td>
									</tr>
								</Fragment>
							);
						})}
					</tbody>
				</ClaimTable>
			</UserTableWrapper>
		</>
	);
};

export default UserClaimInfo;

const UserDefaultTable = styled.table`
	border: 1px solid #e8eaec;
	border-top: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;
	th {
		background: #efefef;
		font-weight: 700;
	}
	th,
	td {
		padding: 12px;
		text-align: center;
		border-left: 1px solid #e8eaec;
		vertical-align: middle;
	}
	td {
		background: #fff;
		border-bottom: 1px solid #e8eaec;
		word-break: break-all;
	}
	button {
		height: 24px;
		font-size: 13px;
	}
`;

const QuestTable = styled(UserDefaultTable)`
	tbody {
		td {
			padding: 9px 12px;
		}
	}
`;

const UserTableWrapper = styled.div`
	width: 100%;
	overflow: auto;
	margin-bottom: 40px;
	${UserDefaultTable}, ${QuestTable} {
		margin-bottom: 0;
	}
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

const NoContent = styled.div`
	padding: 70px;
	text-align: center;
	font-size: 18px;
`;

const ClaimTable = styled(UserDefaultTable)`
	thead {
		th {
			padding: 9px 12px;
		}
		tr:first-child {
			th {
				background: #d9d9d9;
			}
		}
	}
`;
