import type { ReactNode } from "react";

/** 「标题 + 说明 | 控件」一行，设置页与内容策略共用 */
export default function AdminSettingRow({
  title,
  description,
  control,
  children,
}: {
  title: ReactNode;
  description?: ReactNode;
  control?: ReactNode;
  /** 展开区（如阈值输入），画在分隔线下方 */
  children?: ReactNode;
}) {
  return (
    <div className="panel p-4 sm:p-5">
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div className="min-w-0 flex-1">
          <h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
            {title}
          </h2>
          {description != null && description !== "" && (
            <p className="meta text-[12.5px] mt-1 leading-relaxed">{description}</p>
          )}
        </div>
        {control != null && <div className="shrink-0">{control}</div>}
      </div>
      {children != null && (
        <div className="mt-4 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
          {children}
        </div>
      )}
    </div>
  );
}