import styled from 'styled-components';
import Modal from '../common/modal/Modal';
import Button from '../common/button/Button';
import { Title, BtnWrapper } from '../../styles/Components';

const LogViewModal = ({ stateModal, handleModal, data }) => {
	const obj = data !== '' && JSON.parse(data);
	const fullStr = JSON.stringify(obj, null, '\t');

	return (
		<>
			<Modal min="960px" $view={stateModal}>
				<Title $align="center">JSON INFO</Title>
				<JsonContainer>{fullStr}</JsonContainer>
				<BtnWrapper $justify="center">
					<Button theme="line" text="닫기" handleClick={() => handleModal('hidden')} />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default LogViewModal;

const JsonContainer = styled.pre`
	border-radius: 3px;
	background: #f6f6f6;
	min-height: 400px;
	margin-bottom: 20px;
`;
