import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'

export default function Angle() {
  const { getMessage } = useMessage()
  return (
    <>
      <div className="outline-wrap">
        <div className="cul-wrap">
          <div className="outline-box">
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
              <div className="input-grid" style={{ width: '63px' }}>
                <input type="text" className="input-origin block" defaultValue={4} />
              </div>
              <button className="reset-btn"></button>
            </div>
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.cover.outline.arrow')}</span>
              <div className="input-grid" style={{ width: '63px' }}>
                <input type="text" className="input-origin block" defaultValue={5000} />
              </div>
              <button className="reset-btn"></button>
            </div>
          </div>
          <div className="cul-box">
            <Image src="/static/images/canvas/outline_cul.svg" alt="react" width={70} height={59} />
          </div>
        </div>
      </div>
    </>
  )
}