// app/components/admin/CommonComponents/StickyFormActions.tsx
import Link from 'next/link';

interface StickyFormActionsProps {
  cancelHref: string;
  cancelLabel?: string;
  submitLabel?: string;
  loadingLabel?: string;
  saving?: boolean;
  disabled?: boolean;
  showSaveAsDraft?: boolean;
  onSaveAsDraft?: () => void;
  saveAsDraftLabel?: string;
  className?: string;
}

export default function StickyFormActions({
  cancelHref,
  cancelLabel = 'Cancel',
  submitLabel = 'Save',
  loadingLabel = 'Saving…',
  saving = false,
  disabled = false,
  showSaveAsDraft = false,
  onSaveAsDraft,
  saveAsDraftLabel = 'Save as Draft',
  className = '',
}: StickyFormActionsProps) {
  return (
    <div
      className={`sticky bottom-0 z-10 bg-var-surface/95 backdrop-blur-sm border-t border-var-border -mx-6 px-6 py-4 flex items-center justify-between gap-4 shadow-var-card ${className}`}
    >
      <Link
        href={cancelHref}
        className="px-5 py-2.5 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-xl hover:bg-var-surface-hover transition-colors"
      >
        {cancelLabel}
      </Link>

      <div className="flex items-center gap-3">
        {showSaveAsDraft && (
          <button
            type="button"
            onClick={onSaveAsDraft}
            disabled={saving || disabled}
            className="px-5 py-2.5 text-sm font-medium text-var-text-secondary bg-var-surface-hover hover:bg-var-surface rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {saveAsDraftLabel}
          </button>
        )}

        <button
          type="submit"
          disabled={saving || disabled}
          className="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold text-white bg-var-primary rounded-xl hover:bg-var-primary-hover transition-all shadow-var-button hover:shadow-var-card disabled:opacity-60 disabled:cursor-not-allowed"
        >
          {saving ? (
            <>
              <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              {loadingLabel}
            </>
          ) : (
            <>
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              {submitLabel}
            </>
          )}
        </button>
      </div>
    </div>
  );
}