const buttonList01 = [
    {id: 1, name: '割り当て表示'},
    {id: 2, name: '外壁線表示'},
    {id: 3, name: 'グリッド表示'},
    {id: 4, name: '屋根線標示'},
    {id: 5, name: '文字表示'},
    {id: 6, name: '回路番号表示'},
    {id: 7, name: '流れ方向表示'},
    {id: 8, name: '架台表示'},
    {id: 9, name: '画像表示'},
    {id: 10, name: '集計表表示'},
]
const buttonList02 = [
    {id: 1, name: 'ボーダーのみ'},
    {id: 2, name: 'ラインハッチ'},
    {id: 3, name: 'All painted'},
]
const buttonList03 = [
    {id: 1, name: '廊下寸法表示'},
    {id: 2, name: '実際の寸法表示'},
    {id: 3, name: '寸法表示なし'},
]

export default function FirstOption (props){
    const { onClick } = props
    return(
        <>
            <div className="modal-check-btn-wrap">
                <h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
                <div className="flex-check-box for2">
                    {buttonList01.map((item)=>(
                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                            <span className="check-area"></span>
                            <span className="title-area">{item.name}</span>
                        </button>
                    ))}
                </div>
            </div>
            <div className="modal-check-btn-wrap">
                <h3 className="check-wrap-title">寸法表示</h3>
                <div className="flex-check-box for-line">
                    {buttonList03.map((item)=>(
                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                            <span className="check-area"></span>
                            <span className="title-area">{item.name}</span>
                        </button>
                    ))}
                </div>
            </div>
            <div className="modal-check-btn-wrap">
                <h3 className="check-wrap-title">画面表示</h3>
                <div className="flex-check-box for-line">
                    {buttonList02.map((item)=>(
                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                            <span className="check-area"></span>
                            <span className="title-area">{item.name}</span>
                        </button>
                    ))}
                </div>
            </div>
        </>
    )
}