// The sticky save bar every draft-editing page shares: slides up when the draft goes
// dirty, pins to the viewport bottom, offers Save + Discard.
import { AnimatedButton, Button } from "@unom/ui/button";
import { Spinner } from "@unom/ui/spinner";
import { AnimatePresence, motion } from "motion/react";

export type SaveBarProps = {
	readonly dirty: boolean;
	readonly saving: boolean;
	readonly onSave: () => void;
	readonly onDiscard: () => void;
};

export const SaveBar = ({ dirty, saving, onSave, onDiscard }: SaveBarProps) => (
	<AnimatePresence>
		{dirty ? (
			<motion.div
				initial={{ opacity: 0, y: 24 }}
				animate={{ opacity: 1, y: 0 }}
				exit={{ opacity: 0, y: 24 }}
				transition={{ duration: 0.3, ease: [0.165, 0.84, 0.44, 1] }}
				className="sticky bottom-4 z-20 mt-6"
			>
				<div className="flex items-center justify-between gap-4 rounded-card border border-border bg-popover/90 px-5 py-3 shadow-lg backdrop-blur">
					<span className="text-sm text-muted-foreground">Unsaved changes</span>
					<div className="flex items-center gap-2">
						<Button variant="ghost" onClick={onDiscard} disabled={saving}>
							Discard
						</Button>
						{/* variants={{}} neutralizes the button's Section-stagger entry variants —
						    inside this object-form motion wrapper the `enter` label never
						    propagates, which would leave the button stuck at opacity 0. */}
						<AnimatedButton
							onClick={onSave}
							disabled={saving}
							variants={{}}
							whileTap={{ scale: 0.97 }}
						>
							{saving ? <Spinner className="size-4" /> : null}
							Save changes
						</AnimatedButton>
					</div>
				</div>
			</motion.div>
		) : null}
	</AnimatePresence>
);