import { AlertCircle } from "lucide-react";
import { ReportWidget } from "@/types/report-settings";

interface AvailableReportsListProps {
  widgets: ReportWidget[];
  loading: boolean;
  error: string | null;
  onSelect: (widget: ReportWidget) => void;
}

export function AvailableReportsList({
  widgets,
  loading,
  error,
  onSelect,
}: AvailableReportsListProps) {
  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-lg">
      <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">
            Available
          </p>
        </div>
      </div>

      {loading ? (
        <div className="p-5 text-sm text-slate-600">Loading…</div>
      ) : error ? (
        <div className="p-5 flex items-center gap-2 bg-amber-50 border-t border-amber-200 text-amber-700 text-sm">
          <AlertCircle className="h-4 w-4" />
          {error}
        </div>
      ) : (
        <div className="divide-y divide-slate-200">
          {widgets.map((widget) => (
            <div
              key={widget.widget_id}
              onClick={() => onSelect(widget)}
              className="cursor-pointer px-5 py-3 text-sm hover:bg-indigo-50 transition"
            >
              <p className="font-semibold text-slate-900">{widget.name}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}