shoc-frontend-new/src/app/(protected)/completion-docs/_components/completion-template-dialog-chrome.tsx

import { FileText, Pencil, Plus, Save, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
import { IconCloseButton } from "@/components/ui/icon-close-button";
import { Text } from "@/components/ui/text";
import { COMPLETION_TEMPLATE_COPY } from "@/domain/completion-templates/constants/completion-template-constants";
import type { CompletionTemplatePermissions } from "./use-completion-template-permissions";
import type { CompletionTemplateDialogMode } from "./use-completion-template-dialog";

export function CompletionTemplateDialogHeader({
  title,
  subtitle,
  onClose,
}: {
  title: string;
  subtitle: string;
  onClose: () => void;
}) {
  return (
    <div
      className="flex shrink-0 items-center justify-between"
      style={{
        height: 60,
        padding: "0 20px",
        borderBottom: "1px solid var(--color-border)",
        background: "var(--color-bg-surface)",
      }}
    >
      <div className="flex min-w-0 items-center gap-2.5">
        <FileText size={18} className="shrink-0" style={{ color: "var(--color-primary)" }} />
        <div className="min-w-0">
          <Text
            as="div"
            variant="heading"
            className="truncate"
            sx={{ fontSize: 16, fontWeight: 700, lineHeight: 1.1 }}
          >
            {title}
          </Text>
          <Text as="div" variant="caption" tone="muted" className="truncate" sx={{ fontSize: 13 }}>
            {subtitle}
          </Text>
        </div>
      </div>
      <IconCloseButton onClick={onClose} />
    </div>
  );
}

type FooterProps = {
  mode: CompletionTemplateDialogMode;
  permissions: CompletionTemplatePermissions;
  isSaving: boolean;
  onCancel: () => void;
  onSubmit: () => void;
  onEdit: () => void;
  onDelete: () => void;
};

export function CompletionTemplateDialogFooter({
  mode,
  permissions,
  isSaving,
  onCancel,
  onSubmit,
  onEdit,
  onDelete,
}: FooterProps) {
  const footerStyle = {
    padding: "12px 20px",
    borderTop: "1px solid var(--color-border)",
    background: "var(--color-bg-surface)",
    flexShrink: 0,
  };
  if (mode !== "view") {
    return (
      <div className="flex items-center justify-end gap-3" style={footerStyle}>
        <DialogCancelButton onClick={onCancel} disabled={isSaving} />
        <Button onClick={onSubmit} disabled={isSaving} className="gap-1.5">
          {mode === "create" ? <Plus size={13} /> : <Save size={13} />}
          {mode === "create"
            ? COMPLETION_TEMPLATE_COPY.addTemplate
            : COMPLETION_TEMPLATE_COPY.saveChanges}
        </Button>
      </div>
    );
  }
  return (
    <div
      className={`flex items-center gap-3 ${permissions.canDelete ? "justify-between" : "justify-end"}`}
      style={footerStyle}
    >
      {permissions.canDelete && (
        <Button variant="ghost" onClick={onDelete} className="gap-1.5 text-destructive">
          <Trash2 size={13} /> Delete
        </Button>
      )}
      {permissions.canEdit && (
        <Button onClick={onEdit} className="gap-1.5">
          <Pencil size={13} /> Edit
        </Button>
      )}
    </div>
  );
}