import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";

export default function SizeChange(){
    const [sizeCheck, setSizeCheck] = useState(1)
    return(
        <WithDraggable isShow={true} size={'ssm'}>
                <div className="modal-head handle">
                    <h1 className="title">サイズ変更 </h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
                <div className="left-bar handle"></div>
                <div className="right-bar handle"></div>
                    <div className="slope-wrap">
                        <div className="size-option-top">
                            <div className="size-option-wrap">
                                <div className="size-option mb5">
                                    <input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
                                    <span className="normal-font">mm</span>
                                </div>
                                <div className="size-option">
                                    <input type="text" className="input-origin mr5" defaultValue={1000}/>
                                    <span className="normal-font">mm</span>
                                </div>
                            </div>
                        </div>
                        <div className="size-inner-warp">
                            <div className="size-option-side">
                                <div className="size-option-wrap">
                                    <div className="size-option mb5">
                                        <input type="text" className="input-origin mr5" defaultValue={1000} readOnly/>
                                        <span className="normal-font">mm</span>
                                    </div>
                                    <div className="size-option">
                                        <input type="text" className="input-origin mr5" defaultValue={1000}/>
                                        <span className="normal-font">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="size-check-wrap">
                                <button className={`size-btn ${sizeCheck === 1 ? 'act': ''}`} onClick={() => setSizeCheck(1)}></button>
                                <button className={`size-btn ${sizeCheck === 2 ? 'act': ''}`} onClick={() => setSizeCheck(2)}></button>
                                <button className={`size-btn ${sizeCheck === 3 ? 'act': ''}`} onClick={() => setSizeCheck(3)}></button>
                                <button className={`size-btn ${sizeCheck === 4 ? 'act': ''}`} onClick={() => setSizeCheck(4)}></button>
                                <div className="size-box"></div>
                            </div>
                        </div>
                    </div>
                    <div className="grid-btn-wrap">
                        <button className="btn-frame modal act">作成</button>
                    </div>
                </div>
                <div className="modal-foot handle"></div>
        </WithDraggable>
    )
}