import '../../styles/CanvasHint.css';

/**
 * Small rounded badge ("Canvas — Click and drag to move") shown in the
 * top-left of the canvas area. Mirrors the screenshot's onboarding hint.
 */
export function CanvasHint() {
  return (
    <div className="canvas-hint" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
        <path d="M5 3l8 18 2-7 7-2L5 3z" />
      </svg>
      <div className="canvas-hint__text">
        <strong>Canvas</strong>
        <span>Click and drag to move</span>
      </div>
    </div>
  );
}
