Pipeline/frontend/src/components/dashboard/DashboardSection.tsx

import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowUpRight, Info } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  sectionRail,
  sectionTone,
  toneBadge,
  type BadgeTone,
  type SectionToneKey,
} from "./tokens";

interface DashboardSectionProps {
  title: string;
  infoText?: string;
  badge?: { text: string; tone: BadgeTone };
  action?: { label: string; href: string };
  children: ReactNode;
  className?: string;
  tone?: SectionToneKey;
}

/**
 * Standard dashboard card section.
 * Uses .surface-card so all color values come from design tokens —
 * no hardcoded palette classes.
 */
export function DashboardSection({
  title,
  infoText,
  badge,
  action,
  children,
  className,
  tone = "neutral",
}: DashboardSectionProps) {
  return (
    <section
      className={cn(
        "relative overflow-hidden rounded-xl border p-4 shadow-lush md:p-6",
        sectionTone[tone],
        className,
      )}
    >
      <span
        className={cn(
          "pointer-events-none absolute inset-x-4 top-0 h-px",
          sectionRail[tone],
        )}
      />
      <div className="mb-4 flex items-center justify-between gap-3">
        <div className="flex items-center gap-1.5">
          <h3 className="text-lg font-semibold text-strong">{title}</h3>
          {infoText && (
            <span
              className="inline-flex text-muted"
              title={infoText}
              aria-label={infoText}
            >
              <Info className="h-3.5 w-3.5" />
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {badge && (
            <span
              className={cn(
                "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
                toneBadge[badge.tone],
              )}
            >
              {badge.text}
            </span>
          )}
          {action && (
            <Link
              href={action.href}
              className="inline-flex items-center gap-1 text-xs text-muted transition hover:text-strong"
            >
              {action.label}
              <ArrowUpRight className="h-3.5 w-3.5" />
            </Link>
          )}
        </div>
      </div>
      {children}
    </section>
  );
}