import React from 'react';

export type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';

interface SaveStatusIndicatorProps {
  status: SaveStatus;
}

const statusConfig = {
  idle: null,
  saving: { text: 'Saving...', className: 'text-blue-600 bg-blue-50 border-blue-200' },
  saved: { text: 'All changes saved', className: 'text-green-600 bg-green-50 border-green-200' },
  error: { text: 'Save failed - retrying...', className: 'text-red-600 bg-red-50 border-red-200' }
};

export function SaveStatusIndicator({ status }: SaveStatusIndicatorProps) {
  if (status === 'idle') return null;

  const config = statusConfig[status];
  if (!config) return null;

  return (
    <div className={`fixed top-16 left-1/2 transform -translate-x-1/2 z-50 px-3 py-1 rounded-md text-sm font-medium border shadow-sm ${config.className}`}>
      {config.text}
    </div>
  );
}

export default SaveStatusIndicator;