import Link from "next/link";
import type { ReactNode } from "react";

export function Section({ title, action, children, className = "" }: { title: ReactNode; action?: { href: string; label: string }; children: ReactNode; className?: string }) {
  return (
    <section className={`mx-auto max-w-7xl px-4 ${className}`}>
      <div className="flex items-end justify-between gap-4 mb-4">
        <h2 className="text-xl md:text-2xl font-bold tracking-tight">{title}</h2>
        {action && <Link href={action.href} className="text-sm font-semibold text-brand-dark hover:underline whitespace-nowrap">{action.label} →</Link>}
      </div>
      {children}
    </section>
  );
}
export function Stat({ label, value, sub, tone }: { label: string; value: ReactNode; sub?: ReactNode; tone?: "good" | "warn" | "info" }) {
  const c = tone === "good" ? "text-good" : tone === "warn" ? "text-warn" : tone === "info" ? "text-info" : "text-ink";
  return (<div className="tv-card p-4"><p className="tv-label">{label}</p><p className={`mt-1 text-2xl font-extrabold tracking-tight tabular-nums ${c}`}>{value}</p>{sub && <p className="mt-0.5 text-xs text-ink-3">{sub}</p>}</div>);
}
export function Empty({ title, hint, action }: { title: string; hint?: string; action?: { href: string; label: string } }) {
  return (<div className="tv-card p-10 text-center"><p className="text-lg font-semibold">{title}</p>{hint && <p className="mt-1 text-sm text-ink-2 max-w-md mx-auto">{hint}</p>}{action && <Link href={action.href} className="tv-btn tv-btn-primary mt-4">{action.label}</Link>}</div>);
}
export function Notice({ children, tone = "info" }: { children: ReactNode; tone?: "info" | "warn" }) {
  return <p className={`rounded-sm px-3 py-2 text-xs leading-relaxed ${tone === "warn" ? "bg-warn-soft text-warn" : "bg-surface-2 text-ink-2"}`}>{children}</p>;
}
export function Tabs({ items, current, onChange }: { items: { id: string; label: string }[]; current: string; onChange: (id: string) => void }) {
  return (<div className="tv-tabs" role="tablist">{items.map((t) => <button key={t.id} role="tab" type="button" aria-selected={current === t.id} className="tv-tab" onClick={() => onChange(t.id)}>{t.label}</button>)}</div>);
}