import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";

import { Typography } from "@/components/ui/typography";

interface FormSectionProps {
  /** Leading icon for the section header */
  icon: LucideIcon;
  /** Already-translated section title */
  title: string;
  /** Already-translated section subtitle */
  subtitle: string;
  children: ReactNode;
}

/**
 * A titled group of fields inside the single-page registration form. Replaces
 * the old stepper's per-step header: an icon tile + title + subtitle sit above
 * the section's fields so a long form stays scannable without steps.
 */
export function FormSection({
  icon: Icon,
  title,
  subtitle,
  children,
}: FormSectionProps) {
  return (
    <section className="flex flex-col gap-5">
      <div className="flex items-start gap-3">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-[12px] bg-information-light text-primary-sky-blue">
          <Icon className="size-5" />
        </span>
        <div className="flex flex-col gap-0.5">
          <Typography as="h2" variant="h2">
            {title}
          </Typography>
          <Typography variant="caption" color="secondary">
            {subtitle}
          </Typography>
        </div>
      </div>
      {children}
    </section>
  );
}