import React from "react";
import { AlertTriangle, X } from "lucide-react";
import { cn } from "@/lib/utils";

interface ConflictAlertProps {
  title?: string;
  conflicts: string[] | string;
  onDismiss?: () => void;
  className?: string;
}

export function ConflictAlert({
  title = "Timetable Allocation Conflict Detected",
  conflicts,
  onDismiss,
  className,
}: ConflictAlertProps) {
  const conflictList = Array.isArray(conflicts) ? conflicts : [conflicts];

  if (!conflictList.length || (conflictList.length === 1 && !conflictList[0])) {
    return null;
  }

  return (
    <div
      role="alert"
      className={cn(
        "p-3 rounded border border-rose-300 bg-rose-50/80 text-rose-900 text-xs flex items-start gap-3 transition-colors dark:bg-rose-950/40 dark:border-rose-900 dark:text-rose-200",
        className
      )}
    >
      <AlertTriangle className="w-4 h-4 text-rose-600 dark:text-rose-400 shrink-0 mt-0.5" />

      <div className="flex-1">
        <h4 className="font-semibold text-xs tracking-tight mb-0.5 text-rose-950 dark:text-rose-100">
          {title}
        </h4>
        <ul className="list-disc list-inside space-y-0.5 text-[11px] leading-relaxed text-rose-800 dark:text-rose-300">
          {conflictList.map((c, i) => (
            <li key={i}>{c}</li>
          ))}
        </ul>
      </div>

      {onDismiss && (
        <button
          onClick={onDismiss}
          className="text-rose-500 hover:text-rose-800 transition-colors p-0.5 rounded -mr-1 -mt-1 dark:hover:text-rose-200"
          aria-label="Dismiss alert"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      )}
    </div>
  );
}