type AllocationBarItem = {
  key: string;
  label: string;
  percent: number;
  value: number;
  color: string;
};

export function BrokerAllocationBar({
  items,
  title,
}: {
  items: AllocationBarItem[];
  title: string;
}) {
  const positiveItems = items.filter((item) => item.value > 0);

  if (positiveItems.length === 0) {
    return <p className="broker-allocation-bar__empty">Нет данных для распределения</p>;
  }

  return (
    <div className="broker-allocation-bar">
      <div className="broker-allocation-bar__track" role="img" aria-label={title}>
        {positiveItems.map((item) => (
          <span
            key={item.key}
            className="broker-allocation-bar__segment"
            style={{ width: `${item.percent}%`, background: item.color }}
            aria-hidden="true"
          />
        ))}
      </div>
      <ul className="broker-allocation-bar__legend" aria-label={`${title}: легенда`}>
        {positiveItems.map((item) => (
          <li className="broker-allocation-bar__legend-item" key={item.key}>
            <span
              className="broker-allocation-bar__swatch"
              style={{ background: item.color }}
              aria-hidden="true"
            />
            <span>{item.label}</span>
            <strong>{item.percent.toFixed(0)}%</strong>
          </li>
        ))}
      </ul>
    </div>
  );
}