kandev/apps/web/components/settings/settings-page-template.tsx

"use client";

import { Card, CardContent } from "@kandev/ui/card";
import { Separator } from "@kandev/ui/separator";
import { UnsavedChangesBadge, UnsavedSaveButton } from "@/components/settings/unsaved-indicator";

type SettingsPageTemplateProps = {
  title: string;
  description?: string;
  isDirty: boolean;
  saveStatus: "idle" | "loading" | "success" | "error";
  onSave: () => void;
  showSaveButton?: boolean;
  children: React.ReactNode;
  deleteSection?: React.ReactNode;
};

export function SettingsPageTemplate({
  title,
  description,
  isDirty,
  saveStatus,
  onSave,
  showSaveButton = true,
  children,
  deleteSection,
}: SettingsPageTemplateProps) {
  return (
    <div className="space-y-8">
      <div className="flex items-start justify-between">
        <div>
          <h2 className="text-2xl font-bold">{title}</h2>
          {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
        </div>
        {showSaveButton && (
          <div className="flex items-center gap-3">
            {isDirty && <UnsavedChangesBadge />}
            <UnsavedSaveButton
              isDirty={isDirty}
              isLoading={saveStatus === "loading"}
              status={saveStatus}
              onClick={onSave}
            />
          </div>
        )}
      </div>

      <Separator />

      <Card className={isDirty ? "border border-yellow-500/60" : "border"}>
        <CardContent className="">{children}</CardContent>
      </Card>

      {deleteSection}
    </div>
  );
}