import React from 'react';
import type { LaneProgress } from '@shade/sdk';
import { useShadeRuntimeTheme } from '../../ShadeRuntimeProvider.js';

export interface LaneIndicatorProps {
  lanes: LaneProgress[];
  className?: string;
  style?: React.CSSProperties;
}

export function LaneIndicator({
  lanes,
  className,
  style,
}: LaneIndicatorProps): React.ReactElement {
  const theme = useShadeRuntimeTheme();
  const active = theme.laneActive ?? theme.success;
  const idle = theme.laneIdle ?? theme.textDim;
  const error = theme.laneError ?? theme.danger;

  return (
    <div
      className={className}
      role="img"
      aria-label={`${lanes.length} lanes`}
      style={{ display: 'inline-flex', gap: 4, alignItems: 'center', ...style }}
    >
      {lanes.map((l) => {
        let color: string;
        if (l.state === 'error') color = error;
        else if (l.state === 'sending' || l.state === 'done') color = active;
        else color = idle;
        return (
          <span
            key={l.laneId}
            title={`lane ${l.laneId}: ${l.state}`}
            style={{
              width: 6,
              height: 6,
              borderRadius: 3,
              background: color,
              opacity: l.state === 'idle' ? 0.4 : 1,
              transition: 'background 0.2s',
            }}
          />
        );
      })}
    </div>
  );
}
