Signature pad canvas component

'use client';
import { useEffect, useRef, useState } from 'react';

export function SignaturePad({ onChange, height = 160 }: { onChange?: (png: string | null) => void; height?: number }) {
  const ref = useRef<HTMLCanvasElement>(null);
  const [empty, setEmpty] = useState(true);

  // Match the backing store to the screen density so lines stay crisp.
  useEffect(() => {
    const canvas = ref.current!;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = height * dpr;
    const ctx = canvas.getContext('2d')!;
    ctx.scale(dpr, dpr);
    ctx.lineWidth = 2.5;
    ctx.lineCap = ctx.lineJoin = 'round';
    ctx.strokeStyle = '#111827';

    let last: { x: number; y: number } | null = null;
    let mid: { x: number; y: number } | null = null;
    const pos = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect();
      return { x: e.clientX - r.left, y: e.clientY - r.top };
    };
    const down = (e: PointerEvent) => {
      canvas.setPointerCapture(e.pointerId);
      last = pos(e);
      mid = last;
      ctx.beginPath();
      ctx.arc(last.x, last.y, 0.5, 0, 6.3); // a tap leaves a dot
      ctx.stroke();
    };
    const move = (e: PointerEvent) => {
      if (!last || !mid) return;
      const p = pos(e);
      const m = { x: (last.x + p.x) / 2, y: (last.y + p.y) / 2 };
      ctx.beginPath();
      ctx.moveTo(mid.x, mid.y);
      ctx.quadraticCurveTo(last.x, last.y, m.x, m.y); // smooth through midpoints
      ctx.stroke();
      last = p;
      mid = m;
      setEmpty(false);
    };
    const up = () => {
      if (!last) return;
      last = mid = null;
      onChange?.(canvas.toDataURL('image/png'));
    };
    canvas.addEventListener('pointerdown', down);
    canvas.addEventListener('pointermove', move);
    canvas.addEventListener('pointerup', up);
    canvas.addEventListener('pointercancel', up);
    return () => {
      canvas.removeEventListener('pointerdown', down);
      canvas.removeEventListener('pointermove', move);
      canvas.removeEventListener('pointerup', up);
      canvas.removeEventListener('pointercancel', up);
    };
  }, [height, onChange]);

  const clear = () => {
    const c = ref.current!;
    c.getContext('2d')!.clearRect(0, 0, c.width, c.height);
    setEmpty(true);
    onChange?.(null);
  };

  return (
    <div>
      <canvas ref={ref} aria-label="Signature area" style={{ height, touchAction: 'none' }}
        className="w-full rounded-lg border border-dashed border-slate-400 bg-white" />
      <button type="button" onClick={clear} disabled={empty} className="mt-2 text-sm text-blue-600 disabled:opacity-40">
        Clear
      </button>
    </div>
  );
}