import { Card } from "@/components/ui/Card";
import { Eyebrow } from "@/components/ui/Eyebrow";
import { cn } from "@/lib/utils";

/**
 * SettingsSection — pattern visuel commun aux sections de /parametres.
 *
 * Layout 2-col asymétrique (cohérent avec les patterns de paramètres
 * Linear/Stripe-style) :
 *  - Gauche : eyebrow + titre + description (max 320px)
 *  - Droite : Card avec le contenu (form, danger zone, etc.)
 *
 * Sur mobile : empilé.
 */
type SettingsSectionProps = {
  eyebrow: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  children: React.ReactNode;
  /** Variant pour la zone danger : Card en bordure rubis-deep dashed. */
  tone?: "default" | "danger";
  className?: string;
};

export function SettingsSection({
  eyebrow,
  title,
  description,
  children,
  tone = "default",
  className,
}: SettingsSectionProps) {
  return (
    <section
      className={cn(
        "grid grid-cols-1 gap-6 lg:grid-cols-[280px_1fr] lg:gap-10",
        className,
      )}
    >
      <div>
        <Eyebrow tone={tone === "danger" ? "ink" : "rubis"}>{eyebrow}</Eyebrow>
        <h2 className="mt-2 font-display text-[20px] font-semibold tracking-[-0.018em] text-ink">
          {title}
        </h2>
        {description && (
          <p className="mt-2 text-[13px] leading-relaxed text-ink-3">
            {description}
          </p>
        )}
      </div>
      <Card
        padding="md"
        className={cn(
          tone === "danger" &&
            "border-rubis-deep/30 border-dashed bg-rubis-glow/20",
        )}
      >
        {children}
      </Card>
    </section>
  );
}
