// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * SaveBar — sticky footer "Saved" indicator + Save button.
 *
 * @layer Presentation
 */

import { CheckCircle2, Save } from 'lucide-react';
import type { TFunction } from '../lib/constants';

interface SaveBarProps {
  showSaved: boolean;
  canSave: boolean;
  isPending: boolean;
  onSave: () => void;
  t: TFunction;
}

export function SaveBar({
  showSaved,
  canSave,
  isPending,
  onSave,
  t,
}: SaveBarProps) {
  return (
    <div className="flex items-center justify-end gap-3 pt-2 sticky bottom-0 bg-gradient-to-t from-white via-white to-transparent pb-2">
      {showSaved && (
        <span className="inline-flex items-center gap-1.5 text-sm text-green-700">
          <CheckCircle2 size={16} />
          {t('tenants.pluginSettings.saved')}
        </span>
      )}
      <button
        type="button"
        onClick={onSave}
        disabled={!canSave}
        className="px-4 py-2 text-sm font-medium text-white bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <Save size={16} />
        {isPending ? t('tenants.pluginSettings.saving') : t('tenants.pluginSettings.save')}
      </button>
    </div>
  );
}