import React from 'react';
import { useInbox } from '../store.js';

export function ContinuityBadge(): React.ReactElement | null {
  const c = useInbox((s) => s.continuity);
  if (!c.weekStart) return null;
  if (c.weekCount === 0) {
    return <div style={{ fontSize: 13, color: '#666' }}>이번 주 한 줄이면 시작입니다</div>;
  }
  if (c.weekCount < c.weekTarget) {
    return (
      <div style={{ fontSize: 13, color: '#444' }}>
        이번 주 <b>{c.weekCount}/{c.weekTarget}</b>
      </div>
    );
  }
  return (
    <div style={{ fontSize: 13, color: '#236b1a' }}>
      이번 주 <b>{c.weekCount}/{c.weekTarget}</b> ✓
      {c.consecutiveCompleteWeeks > 0 && (
        <span style={{ color: '#888' }}> · 연속 {c.consecutiveCompleteWeeks}주 완성</span>
      )}
    </div>
  );
}
