'use client';
import React from 'react';
import { CheckCircle } from 'lucide-react';

/**
 * Composant indicateur de sauvegarde automatique
 * @param {Boolean} isSaving - Si la sauvegarde est en cours
 * @param {Date} lastSaved - Date de la dernière sauvegarde
 * @param {Boolean} autoSaveEnabled - Si l'auto-save est activée
 * @param {Function} onToggleAutoSave - Callback pour activer/désactiver l'auto-save
 */
export default function AutoSaveIndicator({
  isSaving = false,
  lastSaved = null,
  autoSaveEnabled = true,
  onToggleAutoSave = null,
}) {
  if (!autoSaveEnabled && !lastSaved && !isSaving) {
    return null;
  }

  return (
    <div className="flex justify-between items-center py-2 px-4 bg-gray-50 rounded-lg border border-gray-200">
      <div className="flex items-center space-x-2">
        {isSaving ? (
          <>
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
            <span className="text-sm text-blue-600 font-medium">
              Sauvegarde en cours...
            </span>
          </>
        ) : lastSaved ? (
          <>
            <CheckCircle className="h-4 w-4 text-green-600" />
            <span className="text-sm text-green-600">
              Sauvegardé à {lastSaved.toLocaleTimeString()}
            </span>
          </>
        ) : (
          <span className="text-sm text-gray-500">Auto-sauvegarde activée</span>
        )}
      </div>

      {onToggleAutoSave && (
        <button
          onClick={onToggleAutoSave}
          className={`text-xs px-3 py-1 rounded-full font-medium transition-colors ${
            autoSaveEnabled
              ? 'bg-green-100 text-green-700 hover:bg-green-200'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          }`}
          title={
            autoSaveEnabled
              ? 'Désactiver la sauvegarde automatique'
              : 'Activer la sauvegarde automatique'
          }
        >
          {autoSaveEnabled ? '✓ Auto-save' : '○ Auto-save'}
        </button>
      )}
    </div>
  );
}