import React from 'react';
import { color } from 'folds';

type MicLevelBarsProps = {
  /** 0–3; nothing is drawn at 0. */
  level: number;
};

const HEIGHTS = [3, 5, 7];

/**
 * [Gitea #146] Three small bars in the corner of the mic button showing your
 * own input level while unmuted, so you can see the mic is actually picking
 * you up. Decorative: the button's label already says whether it's on.
 */
export function MicLevelBars({ level }: MicLevelBarsProps) {
  if (level <= 0) return null;
  return (
    <span
      aria-hidden
      data-mic-level={level}
      style={{
        position: 'absolute',
        right: 1,
        bottom: 1,
        display: 'flex',
        alignItems: 'flex-end',
        gap: 1,
        pointerEvents: 'none',
      }}
    >
      {HEIGHTS.map((h, i) => (
        <span
          key={h}
          style={{
            width: 2,
            height: h,
            borderRadius: 1,
            background: i < level ? color.Success.Main : 'transparent',
          }}
        />
      ))}
    </span>
  );
}