import { Layer, Line } from "react-konva";
import type { PencilDrawingState } from "./usePencilDrawing";

type PencilDrawingLayerProps = {
  drawingState: PencilDrawingState;
};

const PencilDrawingLayer = ({ drawingState }: PencilDrawingLayerProps) => {
  const { isDrawing, points, stroke, strokeWidth } = drawingState;

  if (!isDrawing || points.length < 1) return null;

  const linePoints = points.flatMap((p) => [p.x, p.y]);

  return (
    <Layer listening={false}>
      <Line
        points={linePoints}
        stroke={stroke}
        strokeWidth={strokeWidth}
        tension={0.5}
        lineCap="round"
        lineJoin="round"
        perfectDrawEnabled={false}
      />
    </Layer>
  );
};

export default PencilDrawingLayer;
