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

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

export function AvailableReportsList({
  widgets,
  loading,
  error,
  onSelect,
}: AvailableReportsListProps) {
  const header = (
    <ReportsListCardHeader label="Available" />
  );

  let content: React.ReactNode;
  if (loading) {
    content = <div className="p-5 text-sm text-slate-600">Loading…</div>;
  } else if (error) {
    content = (
      <div
        className="flex items-center gap-2 border-t border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-700"
        role="alert"
      >
        <AlertCircle className="h-4 w-4 shrink-0" />
        {error}
      </div>
    );
  } else if (widgets.length === 0) {
    content = (
      <div className="p-5 text-sm text-slate-500">No available reports.</div>
    );
  } else {
    content = (
      <div className="divide-y divide-slate-200">
        {widgets.map((widget) => (
          <button
            type="button"
            key={widget.widget_id}
            onClick={() => onSelect(widget)}
            className="w-full cursor-pointer px-5 py-3 text-left text-sm font-semibold text-slate-900 transition hover:bg-indigo-50"
          >
            {widget.name}
          </button>
        ))}
      </div>
    );
  }

  return <ReportsListCard header={header}>{content}</ReportsListCard>;
}