/** 화면 오른쪽 위 흐린 안내 한 줄 — DWG · DXF 끌어다 놓기 · [삽입 → DWG 불러오기] · 누르면 순서 (B07 · M02 양식 둘 다) */
import { type FC, useState } from 'react';
import { isDrawingReadOnly } from '../state';

export const DropHint: FC = () => {
	const [open, setOpen] = useState(false);
	if (isDrawingReadOnly()) return null;
	return (
		<button
			type="button"
			className="cad-drop-hint controls"
			onClick={() => setOpen((value) => !value)}
			title="오토캐드 도형을 이 화면에 붙이는 법"
		>
			DWG · DXF 파일을 끌어다 놓거나 [삽입 → DWG 불러오기]
			{open && (
				<span className="cad-drop-hint__steps">
					<span>① 오토캐드에서 도형을 고르고 WBLOCK(또는 DXFOUT) 입력 → 파일 이름 정해 저장</span>
					<span>② 저장한 파일(도면 파일 통째도 됨)을 끌어다 놓기 · [삽입 → DWG 불러오기]</span>
					<span>③ 원래 좌표 · 레이어 그대로 붙고 골라진 상태 — 되돌리기 한 번에 빠짐</span>
				</span>
			)}
		</button>
	);
};