import type { AddonData } from '../types';
import { addonPriceForDevices, formatMoney } from '../lib/format';

interface AddonListProps {
  addons: AddonData[];
  devices: number;
  selected: string[];
  onToggle: (id: string) => void;
}

export function AddonList({ addons, devices, selected, onToggle }: AddonListProps) {
  if (addons.length === 0) return null;
  return (
    <div className="plan-addons">
      <div className="addons-head">
        <h3 className="addons-title">Дополнения</h3>
        <span className="addons-cap">Опционально</span>
      </div>
      <div className="addon-list">
        {addons.map((a) => {
          const on = selected.includes(a.id);
          const enabled = a.is_enabled;
          const price = addonPriceForDevices(a, devices);
          return (
            <button
              key={a.id}
              type="button"
              className={`addon-row ${on ? 'is-selected' : ''} ${enabled ? '' : 'is-disabled'}`.trim()}
              aria-pressed={on}
              disabled={!enabled}
              onClick={() => onToggle(a.id)}
            >
              <span className="addon-toggle" aria-hidden="true" />
              <span className="addon-info">
                <span className="addon-name">{a.name}</span>
                {!enabled && <span className="addon-status">Недоступно</span>}
              </span>
              <span className="addon-price">
                {price === 0 ? 'Бесплатно' : <><span className="plus">+</span>{formatMoney(price)}</>}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}