shoc-frontend-new/src/components/common/signature-capture-fields.tsx

import { Box, Button, Tab, Tabs, TextField, Typography } from "@mui/material";
import type { RefObject } from "react";

interface SignatureCaptureFieldsProps {
  isPending: boolean;
  mode: "draw" | "type";
  onModeChange: (mode: "draw" | "type") => void;
  signerName: string;
  onSignerNameChange: (value: string) => void;
  typedName: string;
  onTypedNameChange: (value: string) => void;
  canvasRef: RefObject<HTMLCanvasElement | null>;
  startDraw: (event: React.MouseEvent | React.TouchEvent) => void;
  draw: (event: React.MouseEvent | React.TouchEvent) => void;
  stopDraw: () => void;
  clearCanvas: () => void;
}

export function SignatureCaptureFields({
  isPending,
  mode,
  onModeChange,
  signerName,
  onSignerNameChange,
  typedName,
  onTypedNameChange,
  canvasRef,
  startDraw,
  draw,
  stopDraw,
  clearCanvas,
}: SignatureCaptureFieldsProps) {
  return (
    <>
      <TextField
        label="Full Name"
        value={signerName}
        onChange={(event) => onSignerNameChange(event.target.value)}
        placeholder="Enter signer's full name"
        fullWidth
        size="small"
        disabled={isPending}
      />

      <Tabs value={mode} onChange={(_event, value: "draw" | "type") => onModeChange(value)}>
        <Tab label="Draw" value="draw" disabled={isPending} />
        <Tab label="Type" value="type" disabled={isPending} />
      </Tabs>

      {mode === "draw" ? (
        <Box className="relative">
          <canvas
            ref={canvasRef}
            width={460}
            height={180}
            className="block w-full cursor-crosshair rounded border border-border bg-background"
            onMouseDown={isPending ? undefined : startDraw}
            onMouseMove={isPending ? undefined : draw}
            onMouseUp={isPending ? undefined : stopDraw}
            onMouseLeave={isPending ? undefined : stopDraw}
            onTouchStart={isPending ? undefined : startDraw}
            onTouchMove={isPending ? undefined : draw}
            onTouchEnd={isPending ? undefined : stopDraw}
          />
          <Button size="small" onClick={clearCanvas} className="mt-2" disabled={isPending}>
            Clear
          </Button>
        </Box>
      ) : (
        <Box className="flex flex-col gap-2">
          <TextField
            value={typedName}
            onChange={(event) => onTypedNameChange(event.target.value)}
            placeholder="Type your name"
            fullWidth
            size="small"
            disabled={isPending}
          />
          {Boolean(typedName) && (
            <Typography
              variant="h5"
              className="rounded border border-dashed border-border px-4 py-6 text-center italic"
            >
              {typedName}
            </Typography>
          )}
        </Box>
      )}
    </>
  );
}