// On a study card: whether its Bible text works without a connection, and a button to fix that.
import { DownloadProgress } from './OfflineSave.jsx';
import { offlineStatus } from '../utils/offline.js';

export default function OfflineBadge({ project, offline }) {
  if (!project) return null;
  const status = offlineStatus(project, offline.saved);
  const label = 'mt-1 text-xs';
  if (offline.job) return <div className="mt-2"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
  if (status.state === 'ready') return <p className={`${label} text-[var(--r-accent)]`} title="Your notes and the Bible text for this study open without a connection">✓ Works offline</p>;
  if (status.state === 'licensed') {
    return <p className={`${label} text-[var(--r-sub)]`} title={`The ${status.translation} licence doesn’t allow saving its text for offline use`}>Notes work offline; {status.translation} text needs a connection</p>;
  }
  const next = status.missing[0];
  return (
    <p className={`${label} flex flex-wrap items-center gap-x-2 text-[var(--r-sub)]`}>
      <span>Needs a connection for {status.missing.map((b) => b.name).join(', ')}</span>
      <button type="button" onClick={() => offline.saveBook(status.translation, next.abbrev, next.name)} className="text-[var(--r-accent)] hover:underline">Save {next.name} for offline</button>
    </p>
  );
}