'use client'

import { ToggleonMouse } from '@/components/header/Header'
import { useMessage } from '@/hooks/useMessage'

export default function MenuDepth01() {
  const { getMessage } = useMessage()
  return (
    <div className="canvas-depth2-inner">
      <ul className="canvas-depth2-list">
        <li className="canvas-depth2-item active">
          <button>外壁線を描</button>
        </li>
        <li className="canvas-depth2-item">
          <button>補助線を描</button>
        </li>
        <li className="canvas-depth2-item">
          <button>屋根形状設定</button>
        </li>
        <li className="canvas-depth2-item">
          <button>軒下変更</button>
        </li>
        <li className="canvas-depth2-item">
          <button>外壁線の上げ下げ</button>
        </li>
        <li className="canvas-depth2-item">
          <button>銅線移動</button>
        </li>
        <li className="canvas-depth2-item">
          <button>特殊コーナー形状</button>
        </li>
      </ul>
      <ul className="canvas-depth2-btn-list">
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
        </li>
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>屋根材の設定と変更</button>
        </li>
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>屋根面全体削除</button>
        </li>
      </ul>
    </div>
  )
}