import { BtnWrapper, ButtonClose, InputItem, ModalText } from '../../../styles/Components';
import Button from '../button/Button';
import Modal from './Modal';
import { Input, InputNumber } from 'antd';
import React from 'react';

const InputConfirmModal = ({view, handleClose, handleCancel, handleSubmit, inputText, inputType, value, setValue}) => {
	return (
		<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={view}>
			<BtnWrapper $justify="flex-end">
				<ButtonClose onClick={handleClose} />
			</BtnWrapper>
			<ModalText $align="center">
				<InputItem>
					<p>{inputText}</p>
					{ inputType === 'number' &&
						<InputNumber
							style={{width: '100%'}}
							value={value}
							min={0}
							step={1}
							onChange={(value) => setValue(value)}
					/>}
					{ inputType === 'text' &&
					<Input
						value={value}
						onChange={(value) => setValue(value)}
					/>}

				</InputItem>
			</ModalText>
			<BtnWrapper $gap="10px">
				<Button text="취소" theme="line" size="large" width="100%" handleClick={handleCancel} />
				<Button
					text="확인"
					theme="primary"
					type="submit"
					size="large"
					width="100%"
					handleClick={handleSubmit}
				/>
			</BtnWrapper>
		</Modal>
	);
}

export default InputConfirmModal;