"use client";

import { Rect } from "react-konva";

interface VignetteOverlayProps {
  width: number;
  height: number;
  amount: number;
}

export function VignetteOverlay({
  width,
  height,
  amount,
}: VignetteOverlayProps) {
  if (amount <= 0) return null;

  const opacity = Math.min(0.85, amount / 100);

  return (
    <Rect
      x={0}
      y={0}
      width={width}
      height={height}
      fillRadialGradientStartPoint={{ x: width / 2, y: height / 2 }}
      fillRadialGradientStartRadius={0}
      fillRadialGradientEndPoint={{ x: width / 2, y: height / 2 }}
      fillRadialGradientEndRadius={Math.max(width, height) / 1.1}
      fillRadialGradientColorStops={[
        0,
        "rgba(0,0,0,0)",
        1,
        `rgba(0,0,0,${opacity})`,
      ]}
      listening={false}
    />
  );
}
