import React from 'react';
import { useTranslation } from '../../i18n/LanguageContext';

const SaveDialog = ({ show, onSave, onDiscard, onCancel }) => {
  const t = useTranslation();

  if (!show) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-800">
        <h3 className="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">{t('savedialog.title')}</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-6">{t('savedialog.message')}</p>
        <div className="flex gap-3">
          <button
            onClick={onSave}
            className="flex-1 bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700 transition font-semibold"
          >
            {t('savedialog.yes')}
          </button>
          <button
            onClick={onDiscard}
            className="flex-1 bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition font-semibold"
          >
            {t('savedialog.no')}
          </button>
          <button
            onClick={onCancel}
            className="flex-1 bg-gray-500 dark:bg-gray-700 text-white px-4 py-3 rounded-lg hover:bg-gray-600 dark:hover:bg-gray-600 transition font-semibold"
          >
            {t('savedialog.cancel')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default SaveDialog;