// Presentational primitives for the project-detail layout (Thông tin chung / Hợp đồng /
// Kinh phí / Thời gian / Nghiệm thu). Mirrors the admin detail page's visual language:
// a numbered section panel with a left accent bar, and a grid of small uppercase grey
// LABEL over VALUE fields. Pure presentation — no data fetching, no content keys.
import type { ReactNode } from 'react';

/** A numbered section panel: "I. Thông tin chung" with a primary accent bar, then content. */
export function SectionPanel({
  index,
  title,
  action,
  children,
}: {
  index: string;
  title: string;
  action?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="rounded-2xl border border-border bg-card p-5 sm:p-6">
      <div className="mb-5 flex items-start justify-between gap-3">
        <h2 className="flex items-center gap-2.5 font-serif text-base font-semibold text-foreground">
          <span className="inline-block h-5 w-1 rounded-full bg-primary" aria-hidden />
          {index}. {title}
        </h2>
        {action}
      </div>
      {children}
    </section>
  );
}

/** Responsive grid that lays fields out 1→2→4 columns like the admin page. */
export function FieldGrid({ children }: { children: ReactNode }) {
  return <div className="grid grid-cols-1 gap-x-8 gap-y-5 sm:grid-cols-2 lg:grid-cols-4">{children}</div>;
}

/** A single LABEL / VALUE pair. Label is forced to sans + uppercase to beat the global serif. */
export function Field({
  label,
  value,
  full,
  mono,
}: {
  label: string;
  value?: ReactNode;
  full?: boolean;
  mono?: boolean;
}) {
  const empty = value === undefined || value === null || value === '';
  return (
    <div className={full ? 'sm:col-span-2 lg:col-span-4' : undefined}>
      <div className="font-sans text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
        {label}
      </div>
      <div
        className={
          'mt-1 text-sm leading-relaxed ' +
          (empty ? 'text-muted-foreground/60' : 'text-foreground') +
          (mono ? ' font-mono' : '')
        }
      >
        {empty ? '---' : value}
      </div>
    </div>
  );
}
