import type { ReactNode } from "react";
import { useTranslation } from "react-i18n-lite";

interface SimpleFormPageLayoutProps {
  title: string;
  onBack: () => void;
  children: ReactNode;
}

export function SimpleFormPageLayout({ title, onBack, children }: SimpleFormPageLayoutProps) {
  const { t } = useTranslation();
  return (
    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
        <button
          type="button"
          onClick={onBack}
          style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}
        >
          ← {t("common.back")}
        </button>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>{title}</h1>
      </header>
      {children}
    </div>
  );
}