import { Button } from "@/client/components/ui/button";
import { ErrorBanner } from "@/client/components/ui/error-banner";

interface FormActionsProps {
  pending: boolean;
  error?: string | null;
  onDismissError?: () => void;
  submitLabel: string;
  onCancel: () => void;
  submitDisabled?: boolean;
}

export const FormActions = ({
  pending,
  error,
  onDismissError,
  submitLabel,
  onCancel,
  submitDisabled,
}: FormActionsProps) => (
  <>
    {error ? <ErrorBanner message={error} onDismiss={onDismissError} /> : null}
    <div className="flex flex-wrap justify-end gap-2">
      <Button type="button" variant="ghost" onClick={onCancel} disabled={pending}>
        Cancel
      </Button>
      <Button type="submit" loading={pending} disabled={submitDisabled}>
        {submitLabel}
      </Button>
    </div>
  </>
);