type SavedDashboard = {
  datasetId: string;
  description: string;
  id: string;
  label: string;
};

type SavedDashboardListProps = {
  dashboards: readonly SavedDashboard[];
  onOpen: (datasetId: string) => void;
};

export function SavedDashboardList({ dashboards, onOpen }: SavedDashboardListProps) {
  return (
    <section className="rounded-[2rem] border border-border bg-card p-6">
      <div>
        <p className="text-xs uppercase tracking-[0.2em] text-foreground/50">Saved Views</p>
        <h2 className="mt-2 text-2xl font-semibold">Operator Dashboards</h2>
      </div>
      <div className="mt-6 grid gap-4">
        {dashboards.map((dashboard) => (
          <button
            className="rounded-[1.5rem] border border-border/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.74),rgba(240,236,227,0.98))] p-4 text-left"
            key={dashboard.id}
            onClick={() => onOpen(dashboard.datasetId)}
            type="button"
          >
            <p className="text-sm font-semibold">{dashboard.label}</p>
            <p className="mt-2 text-sm text-foreground/70">{dashboard.description}</p>
          </button>
        ))}
      </div>
    </section>
  );
}
