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

/**
 * Auth form container. On phones it is borderless and fills the column (full-height flow, big
 * title, 16 px inputs from the base styles); from `sm` up it becomes an elevated card.
 */
export function AuthCard({ title, description, children, footer, icon, className }: { title: string; description?: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; icon?: React.ReactNode; className?: string }) {
  return (
    <div className={cn("animate-fade-up", className)}>
      <div className="rounded-2xl sm:border sm:border-border sm:bg-bg-elevated sm:p-8 sm:shadow-md">
        {icon ? <div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-accent-soft text-accent [&_svg]:size-5">{icon}</div> : null}
        <h1 className="text-balance text-[26px] font-semibold leading-tight tracking-[-0.02em] sm:text-[22px]">{title}</h1>
        {description ? <p className="mt-2 text-pretty text-[15px] leading-6 text-fg-muted sm:mt-1.5 sm:text-[14px]">{description}</p> : null}
        <div className="mt-7 sm:mt-6 [&_button[type=submit]]:h-12 sm:[&_button[type=submit]]:h-11 [&_input]:h-11 sm:[&_input]:h-9 [&_label]:text-[14px] sm:[&_label]:text-[13px]">{children}</div>
      </div>
      {footer ? <div className="mt-6 text-center text-[15px] text-fg-muted sm:mt-5 sm:text-sm">{footer}</div> : null}
    </div>
  );
}

export function FormError({ children, id }: { children?: React.ReactNode; id?: string }) {
  if (!children) return null;
  return (
    <p id={id} role="alert" className="rounded-lg border border-danger/30 bg-danger-soft px-3 py-2.5 text-[14px] leading-5 text-danger sm:text-[13px]">
      {children}
    </p>
  );
}

export function FormNotice({ children, tone = "info" }: { children: React.ReactNode; tone?: "info" | "success" | "warning" }) {
  const cls = { info: "border-info/30 bg-info-soft text-info", success: "border-success/30 bg-success-soft text-success", warning: "border-warning/30 bg-warning-soft text-warning" }[tone];
  return (
    <div role="status" className={cn("rounded-lg border px-3 py-2.5 text-[14px] leading-5 sm:text-[13px]", cls)}>
      {children}
    </div>
  );
}