import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { FormSection } from "../organisms/FormSection";
import { Button } from "../ui/button";
import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";
import { Save, X } from "lucide-react";

interface FormSectionData {
  title: string;
  content: ReactNode;
  collapsible?: boolean;
  defaultOpen?: boolean;
}

interface FormPageTemplateProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  sections: FormSectionData[];
  onSave: () => void;
  onCancel: () => void;
  saveLabel?: string;
  saving?: boolean;
}

export const FormPageTemplate = ({
  title,
  description,
  icon,
  sections,
  onSave,
  onCancel,
  saveLabel = "저장",
  saving = false
}: FormPageTemplateProps) => {
  return (
    <PageLayout>
      <PageHeader
        title={title}
        description={description}
        icon={icon}
        actions={
          <>
            <Button variant="outline" onClick={onCancel} disabled={saving}>
              <X className="w-4 h-4 mr-2" />
              취소
            </Button>
            <Button onClick={onSave} disabled={saving}>
              <Save className="w-4 h-4 mr-2" />
              {saving ? "저장 중..." : saveLabel}
            </Button>
          </>
        }
      />
      
      <div className="space-y-4">
        {sections.map((section, index) => (
          <FormSection
            key={index}
            title={section.title}
            collapsible={section.collapsible}
            defaultOpen={section.defaultOpen}
          >
            {section.content}
          </FormSection>
        ))}
      </div>
    </PageLayout>
  );
};
