import { GripVertical } from "lucide-react";
import { ReportWidgetWithPriority } from "@/types/report-settings";

interface SelectedReportsListProps {
  widgets: ReportWidgetWithPriority[];
  dragId: string | null;
  onDragStart: (id: string) => void;
  onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
  onDrop: (id: string) => void;
}

export function SelectedReportsList({
  widgets,
  dragId,
  onDragStart,
  onDragOver,
  onDrop,
}: SelectedReportsListProps) {
  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-lg animate-fadeIn">
      <div className="flex items-center justify-between border-b px-5 py-3">
        <div>
          <p className="text-[11px] uppercase tracking-[0.2em] text-slate-500 font-semibold">
            Active Priority List
          </p>
          <p className="text-sm text-slate-700">
            Drag items to reorder by priority
          </p>
        </div>
      </div>

      <div className="divide-y divide-slate-200">
        {widgets.map((widget, idx) => (
          <div
            key={widget.widget_id}
            draggable
            onDragStart={() => onDragStart(widget.widget_id)}
            onDragOver={onDragOver}
            onDrop={() => onDrop(widget.widget_id)}
            className={`grid grid-cols-[60px_1fr] items-center px-5 py-3 cursor-pointer transition ${
              dragId === widget.widget_id ? "ring-2 ring-indigo-400" : ""
            } ${idx % 2 === 0 ? "bg-white" : "bg-slate-50/60"}`}
          >
            <div className="flex items-center gap-2 text-slate-500">
              <GripVertical className="h-4 w-4" />
              <span className="text-xs font-semibold text-indigo-700">
                {widget.effectivePriority}
              </span>
            </div>

            <p className="font-semibold text-slate-900">{widget.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}