// ═══════════════════════════════════════════════════════════════
//  BARCODE — Composant code-barres SVG
// ═══════════════════════════════════════════════════════════════

function Barcode({ value = '', width = 220, height = 48, showText = true, textColor = '#444' }) {
  const pattern = React.useMemo(() => {
    const p = [1,0,1,0,1,0,1];
    const str = String(value);
    for (let i = 0; i < str.length; i++) {
      const ch = str.charCodeAt(i);
      for (let b = 0; b < 6; b++) p.push((ch >> b) & 1);
      p.push(0);
    }
    p.push(1, 1, 0, 1);
    return p;
  }, [value]);

  const bw = width / pattern.length;

  return (
    <div style={{ textAlign:'center' }}>
      <svg width={width} height={height} style={{ display:'block', margin:'0 auto' }}>
        {pattern.map((on, i) =>
          on ? (
            <rect
              key={i}
              x={i * bw}
              y={0}
              width={Math.max(bw - 0.2, 0.5)}
              height={height}
              fill="#111"
            />
          ) : null
        )}
      </svg>
      {showText && (
        <div style={{
          fontFamily: "'DM Mono', monospace",
          fontSize: 9,
          letterSpacing: 2,
          color: textColor,
          marginTop: 3,
        }}>
          {value}
        </div>
      )}
    </div>
  );
}