import { useI18n } from '../i18n/I18nProvider';

// CLEAR takes the photo off the stage, and the work standing on it goes with
// it: the look lives in the session, not in the picture. So the button asks
// first, and the two ways of keeping something are one tap each — file the
// frame in MY PHOTOS so it can be picked up again, or put a JPEG in the user's
// hands. Neither is forced: CLEAR WITHOUT SAVING is a plain discard, and
// closing the dialog does nothing at all.
export function ClearPhotoModal({
  onSave,
  onExport,
  onDiscard,
  onClose,
}: {
  onSave: () => void;
  onExport: () => void;
  onDiscard: () => void;
  onClose: () => void;
}) {
  const { t } = useI18n();

  return (
    <div className="modal-backdrop" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" data-key="clear-modal">
        <h2>{t('clear.title')}</h2>
        <p className="hint" data-key="clear-hint">
          {t('clear.hint')}
        </p>
        <button type="button" className="btn" data-key="clear-save" onClick={onSave}>
          {t('clear.save')}
        </button>
        <button type="button" className="btn" data-key="clear-export" onClick={onExport}>
          {t('clear.export')}
        </button>
        <button type="button" className="btn adm-danger" data-key="clear-discard" onClick={onDiscard}>
          {t('clear.discard')}
        </button>
        <button type="button" className="btn ghost" data-key="clear-cancel" onClick={onClose}>
          {t('clear.cancel')}
        </button>
      </div>
    </div>
  );
}