"use client";

import { clsx } from "clsx";
import { memo } from "react";

interface ConflictOverlayProps {
  /** Pixel left offset within the canvas */
  left: number;
  /** Pixel width */
  width: number;
  /** Row height */
  height: number;
  /** Conflict type */
  type: "availability" | "overlap" | "budget";
  message?: string;
}

export const ConflictOverlay = memo(function ConflictOverlay({ left, width, height, type, message }: ConflictOverlayProps) {
  const colors = {
    availability: "bg-red-400/30 border-red-400",
    overlap: "bg-orange-400/30 border-orange-400",
    budget: "bg-yellow-400/30 border-yellow-400",
  };

  return (
    <div
      className={clsx(
        "absolute border-2 rounded-md pointer-events-none",
        "flex items-center justify-center",
        colors[type],
      )}
      style={{ left, width, height, top: 4 }}
      title={message}
    >
      <span className="text-xs font-medium text-red-700 bg-white/80 px-1 rounded">
        {type === "availability" ? "⚡ conflict" : type === "overlap" ? "⚠ overlap" : "💰 over budget"}
      </span>
    </div>
  );
});