// Thin strip under the top bar while the open chapter belongs to an active
// reading plan. Shows which day you're on and lets you mark it read.
export default function PlanStrip({ matches, notice, onToggle }) {
  if (!matches.length && !notice) return null;
  return (
    <div className="mx-auto flex max-w-2xl flex-col gap-1 px-4 pt-2 font-sans">
      {notice && <p className="rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-xs text-[var(--r-accent)]">{notice}</p>}
      {matches.map((m) => (
        <button key={m.progressId} type="button" onClick={() => onToggle(m)}
          className="flex items-center justify-between gap-3 rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-left text-xs text-[var(--r-sub)] hover:bg-black/5"
          title={m.done ? 'Tap to unmark this day' : 'Tap to mark this day read'}>
          <span className="truncate"><span className="text-[var(--r-accent)]">{m.done ? '✓' : '●'}</span> {m.plan.title} · Day {m.dayIndex + 1} of {m.plan.days}</span>
          <span className="shrink-0">{m.total > 1 ? `${m.position} of ${m.total}` : m.done ? 'Read' : 'Mark read'}</span>
        </button>
      ))}
    </div>
  );
}