import type { ComponentType, ReactNode } from "react";
import type { LucideProps } from "lucide-react";
import { GradientIcon } from "~/components/ui/GradientIcon";
import { cn } from "~/lib/utils";

type StatusTone = "default" | "success" | "warning" | "locked";

export function SettingsStatusPill({
  children,
  tone = "default",
}: {
  children: ReactNode;
  tone?: StatusTone;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold",
        tone === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
        tone === "warning" && "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
        tone === "locked" && "border-muted-foreground/20 bg-muted text-muted-foreground",
        tone === "default" && "border-border bg-background text-muted-foreground"
      )}
    >
      {children}
    </span>
  );
}

export function SettingsSection({
  id,
  icon,
  title,
  description,
  status,
  children,
  className,
}: {
  id: string;
  icon: ComponentType<LucideProps>;
  title: string;
  description: string;
  status?: ReactNode;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section id={id} className={cn("scroll-mt-24 space-y-8", className)}>
      <div className="space-y-3">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex items-start gap-3">
            <GradientIcon icon={icon} className="mt-1 h-6 w-6 shrink-0" />
            <div>
              <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
              <p className="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p>
            </div>
          </div>
          {status && <div className="sm:pt-1">{status}</div>}
        </div>
      </div>
      <div className="space-y-5">{children}</div>
    </section>
  );
}