import { styled } from 'styled-components';

import { Title } from '../../styles/Components';
import { BtnWrapper, TableStyle } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import Modal from '../../components/common/modal/Modal';
import { Fragment } from 'react';

const LandDetailModal = ({ detailPop, handleClick }) => {
	const landlist = [
		{ floor: '1', instanceId: 'ad31230001' },
		{ floor: '2', instanceId: 'ad31230001' },
	];
	return (
		<>
			<Modal $view={detailPop} min="480px">
				<Title $align="center">랜드 상세정보</Title>
				<TableWrapper>
					<TableStyle>
						<thead>
							<tr>
								<th width="100">층 정보</th>
								<th>인스턴스 연결 정보</th>
							</tr>
						</thead>
						<tbody>
							{landlist.map((el, index) => {
								return (
									<Fragment key={index}>
										<tr>
											<td>{el.floor}</td>
											<InstanceData>{el.instanceId}</InstanceData>
										</tr>
									</Fragment>
								);
							})}
						</tbody>
					</TableStyle>
				</TableWrapper>
				<BtnWrapper2 $justify="center">
					<Button
						theme="line"
						text="확인"
						handleClick={e => {
							e.preventDefault();
							handleClick();
						}}
					/>
				</BtnWrapper2>
			</Modal>
		</>
	);
};

export default LandDetailModal;

const InstanceData = styled.td``;

const TableWrapper = styled.div`
	max-height: 50vh;
	max-width: 600px;
	overflow: auto;
	${InstanceData} {
		text-align: left;
	}
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

const BtnWrapper2 = styled(BtnWrapper)`
	margin-top: 30px;
`;
