import type { ReactNode } from "react";
import { cn } from "@/lib/cn";

export function AdminDetailSection({
  title,
  description,
  children,
  className,
  action,
}: {
  title: string;
  description?: string;
  children: ReactNode;
  className?: string;
  action?: ReactNode;
}) {
  return (
    <section
      className={cn(
        "overflow-hidden rounded-[10px] border border-line/80 bg-surface shadow-pv",
        className,
      )}
    >
      <div className="flex flex-wrap items-start justify-between gap-2 border-b border-line/80 bg-[#FAFBFC] px-4 py-3.5">
        <div className="min-w-0">
          <h2 className="text-[0.9375rem] font-semibold tracking-[-0.015em] text-primary">{title}</h2>
          {description ? (
            <p className="mt-0.5 text-[0.8125rem] leading-snug text-ink-60">{description}</p>
          ) : null}
        </div>
        {action ? <div className="shrink-0">{action}</div> : null}
      </div>
      <div className="px-4 py-1">{children}</div>
    </section>
  );
}

export function AdminInfoRow({
  label,
  children,
  className,
}: {
  label: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "grid grid-cols-1 gap-1 border-b border-line/70 py-3 last:border-b-0 sm:grid-cols-[11rem_minmax(0,1fr)] sm:items-center sm:gap-4",
        className,
      )}
    >
      <dt className="text-[0.75rem] font-medium uppercase tracking-[0.04em] text-ink-40">{label}</dt>
      <dd className="min-w-0 text-[0.8125rem] text-text">{children}</dd>
    </div>
  );
}

export function AdminInfoList({ children, className }: { children: ReactNode; className?: string }) {
  return <dl className={cn("divide-y-0", className)}>{children}</dl>;
}