"use client";
import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * Section header shared by every settings page. On phones the layout renders the back bar with the
 * section title, so we only show the description there; on desktop the title + description stand at
 * the top of the content column.
 */
export function SettingsSection({ title, description, actions, children, className }: { title: string; description?: React.ReactNode; actions?: React.ReactNode; children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div className="min-w-0">
          <h2 className="hidden text-[15px] font-semibold tracking-tight md:block">{title}</h2>
          {description ? <p className="text-[13px] leading-5 text-fg-muted">{description}</p> : null}
        </div>
        {actions ? <div className="flex shrink-0 gap-2">{actions}</div> : null}
      </div>
      {children}
    </div>
  );
}

/** Grouped rows with hairlines (iOS-style list) — used for toggles and key/value rows on every breakpoint. */
export function SettingsGroup({ title, description, children, className, footer }: { title?: React.ReactNode; description?: React.ReactNode; children: React.ReactNode; className?: string; footer?: React.ReactNode }) {
  return (
    <section className={cn("min-w-0", className)}>
      {title ? (
        <header className="mb-2 px-1">
          <h3 className="text-[13px] font-semibold tracking-tight">{title}</h3>
          {description ? <p className="mt-0.5 text-[12px] leading-4 text-fg-muted">{description}</p> : null}
        </header>
      ) : null}
      <div className="panel divide-y divide-hairline overflow-hidden">{children}</div>
      {footer ? <p className="mt-2 px-1 text-[11px] leading-4 text-fg-subtle">{footer}</p> : null}
    </section>
  );
}

/** One row: label + optional description on the left, control on the right. min-h 44 px. */
export function SettingsRow({ label, description, children, htmlFor, className }: { label: React.ReactNode; description?: React.ReactNode; children?: React.ReactNode; htmlFor?: string; className?: string }) {
  return (
    <div className={cn("flex min-h-[52px] items-center justify-between gap-4 px-4 py-3", className)}>
      <div className="min-w-0">
        {htmlFor ? (
          <label htmlFor={htmlFor} className="block text-[14px] font-medium leading-5">
            {label}
          </label>
        ) : (
          <p className="text-[14px] font-medium leading-5">{label}</p>
        )}
        {description ? <p className="mt-0.5 text-[12px] leading-4 text-fg-muted">{description}</p> : null}
      </div>
      {children ? <div className="shrink-0">{children}</div> : null}
    </div>
  );
}