// Card at the end of the chapter while reading a plan: step to the next chapter of
// today's reading, or finish the day and roll into the next one.
export default function PlanFooter({ info, label, onNext, onNextDay, onFinish }) {
  if (!info || info.position === 0) return null;
  const last = info.position === info.total;
  const nextRef = !last ? info.refs[info.position] : null;
  const btn = 'rounded-full bg-[var(--r-accent)] px-5 py-2 text-sm font-medium text-[var(--r-on)]';
  return (
    <div className="mx-auto mt-10 max-w-md rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4 text-center font-sans">
      <p className="text-xs text-[var(--r-sub)]">{info.plan.title} · Day {info.dayIndex + 1}</p>
      {!last && (
        <>
          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">{info.total - info.position} more chapter{info.total - info.position === 1 ? '' : 's'} today</p>
          <button type="button" onClick={onNext} className={btn}>Next: {label(nextRef)}</button>
        </>
      )}
      {last && info.nextDayRefs?.length > 0 && (
        <>
          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">That’s Day {info.dayIndex + 1}</p>
          <button type="button" onClick={onNextDay} className={btn}>Mark read · Day {info.dayIndex + 2}: {label(info.nextDayRefs[0])}</button>
          <div><button type="button" onClick={onFinish} className="mt-2 text-xs text-[var(--r-sub)] underline">Mark read and stop for today</button></div>
        </>
      )}
      {last && !info.nextDayRefs?.length && (
        <>
          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">Last day of the plan</p>
          <button type="button" onClick={onFinish} className={btn}>{info.done ? 'Plan complete' : 'Finish plan'}</button>
        </>
      )}
    </div>
  );
}