const MODES = [
    { key: 'core',                label: '코어',     sets: 5,  amount: 5000 },
    { key: 'core_bonus',          label: '+ 보너스', sets: 10, amount: 10000 },
    { key: 'core_bonus_extended', label: '+ 확장',   sets: 15, amount: 15000 },
    { key: 'full',                label: '+ 풀',     sets: 20, amount: 20000 },
];

export default function TierModeToggle({ value, onChange }) {
    return (
        <div className="lc-toggle" role="tablist">
            {MODES.map((m, i) => (
                <button
                    key={m.key}
                    role="tab"
                    aria-selected={value === m.key}
                    className={`lc-toggle__chip ${value === m.key ? 'is-active' : ''}`}
                    onClick={() => onChange(m.key)}
                >
                    <span className="lc-toggle__dots">{'●'.repeat(i + 1) + '○'.repeat(3 - i)}</span>
                    <span className="lc-toggle__lbl">{m.label}</span>
                    <span className="lc-toggle__sub">{m.sets}세트 · {m.amount.toLocaleString()}원</span>
                </button>
            ))}
        </div>
    );
}

export { MODES };
