import type { HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";

export type FormSectionVariant = "plain" | "separated" | "panel";

export type FormSectionProps = HTMLAttributes<HTMLElement> & {
  children: ReactNode;
  title?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  variant?: FormSectionVariant;
  contentClassName?: string;
};

export default function FormSection({
  children,
  title,
  description,
  actions,
  variant = "plain",
  className = "",
  contentClassName = "",
  ...props
}: FormSectionProps) {
  const { translateText } = usePlatformLanguage();

  return (
    <section {...props} className={["form-section-layout", `form-section-${variant}`, className].filter(Boolean).join(" ")}>
      {(title || description || actions) && (
        <header className="form-section-header">
          <div className="form-section-heading-copy">
            {title && <h3>{translateReactNode(title, translateText)}</h3>}
            {description && <div className="form-section-description">{translateReactNode(description, translateText)}</div>}
          </div>
          {actions && <div className="form-section-actions">{translateReactNode(actions, translateText)}</div>}
        </header>
      )}
      <div className={["form-section-content", contentClassName].filter(Boolean).join(" ")}>{children}</div>
    </section>
  );
}