import { formatCoin } from "../utils/format.js";

export function HorizontalBars({ items }) {
  const max = Math.max(...items.map((item) => item.value), 1);
  return (
    <div className="bar-list">
      <div className="section-label">礼物消费排行</div>
      {items.map((item, index) => (
        <div className="bar-row" key={item.name}>
          <span>{index + 1}</span>
          <em>{item.name}</em>
          <div className="bar-track">
            <i style={{ width: `${Math.max(4, (item.value / max) * 100)}%` }} />
          </div>
          <b>{formatCoin(item.value)}</b>
        </div>
      ))}
    </div>
  );
}