import { useRecoilState } from 'recoil'
import { settingModalSecondOptionsState } from '@/store/settingAtom'

export default function SecondOption() {
  const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
  const { option1, option2 } = settingsModalOptions
  const onClickOption = (option) => {
    option.selected = !option.selected

    setSettingModalOptions({ option1: option1, option2: option2 })
  }
  return (
    <>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">フォントとサイズの変更</h3>
        <div className="flex-check-box for2">
          {settingsModalOptions.option1.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">
          {settingsModalOptions.option2.map((item) => (
            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
              <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>
        </div>
      </div>
    </>
  )
}