import React from 'react';

const LABEL_COLOR = {
  '성장': '#4B7065',
  '안정': '#D4A574',
  '변동': '#6A5285',
  '도전': '#C58F76',
  '정체': '#888',
};

export default function MonthlyFlow({ flow }) {
  if (!flow || flow.length === 0) return null;
  return (
    <div className="saju-monthly-flow">
      {flow.map((m) => (
        <div key={m.month} className="saju-monthly-flow__cell">
          <span className="saju-monthly-flow__month">{m.month}월</span>
          <span className="saju-monthly-flow__score" style={{ color: LABEL_COLOR[m.label] }}>
            {m.score}
          </span>
          <span className="saju-monthly-flow__label">{m.label}</span>
        </div>
      ))}
    </div>
  );
}