/** 화면 오른쪽 위 흐린 안내 — 오토캐드에서 저장한 파일을 끌어다 놓는 법 · 누르면 순서 (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="오토캐드 도형을 이 화면에 붙이는 법"
		>
			오토캐드에서 WBLOCK(또는 DXFOUT)으로 저장 → 파일을 여기로 끌어다 놓기
			{open && (
				<span className="cad-drop-hint__steps">
					<span>① 오토캐드에서 도형을 고르고 WBLOCK(또는 DXFOUT) 입력 → 파일 이름 정해 저장</span>
					<span>② 저장한 파일(도면 파일 통째도 됨)을 이 화면으로 끌어다 놓기</span>
					<span>③ 원래 좌표 · 도면층 그대로 붙고 골라진 상태 — 되돌리기 한 번에 빠짐</span>
				</span>
			)}
		</button>
	);
};