const buttonList01 = [
    {id: 1, name: '文字フォントの変更'},
    {id: 2, name: 'フロー方向フォントの変更'},
    {id: 3, name: '寸法フォントの変更'},
    {id: 4, name: '回路番号フォントの変更'},
]
const buttonList02 = [
    {id: 1, name: '極小'},
    {id: 2, name: '牛'},
    {id: 3, name: '中'},
    {id: 4, name: 'ティーン'},
]

export default function SecondOption (props){
    const { onClick } = props
    return(
        <>
            <div className="modal-check-btn-wrap">
                <h3 className="check-wrap-title">フォントとサイズの変更</h3>
                <div className="flex-check-box for2">
                    {buttonList01.map((item)=>(
                        <button className="arr-btn">
                            <span>{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 className="flex-check-box for-line">
                    <button className="arr-btn">
                        <span>寸法線の設定</span>
                    </button>
                    <button className="arr-btn">
                        <span>図面サイズの設定</span>
                    </button>
                    <button className="adsorption-point act">
                        <span>吸着点</span>
                        <i>ON</i>
                    </button>
                </div>
            </div>
        </>
    )
}