/**
 * ScribbleStrip — the LCD-like label display above each footswitch.
 *
 * Shows block/preset/snapshot name and status, mimicking the
 * Helix / Line 6 scribble strip LCDs.
 */

import type { ScribbleStripData, ScribbleColor } from '../types';
import { SCRIBBLE_COLORS } from '../types';
import { useDoubleTap } from '../hooks/useDoubleTap';

interface ScribbleStripProps {
  data: ScribbleStripData;
  onPress: () => void;
  onSecondary: () => void;
}

export function ScribbleStrip({ data, onPress, onSecondary }: ScribbleStripProps) {
  const { handleTap } = useDoubleTap({
    onSingleTap: onPress,
    onDoubleTap: onSecondary,
  });

  const color = SCRIBBLE_COLORS[data.color ?? 'off'];
  const isActive = data.active ?? false;
  const isBypassed = data.bypassed ?? false;

  return (
    <div
      className="scribble-strip"
      data-active={isActive}
      data-bypassed={isBypassed}
      onClick={handleTap}
      style={{
        '--scribble-color': color,
      } as React.CSSProperties}
    >
      {/* LED indicator */}
      <div
        className="scribble-led"
        style={{
          background: color,
          boxShadow: isActive ? `0 0 6px ${color}` : 'none',
          opacity: isActive ? 1 : 0.25,
        }}
      />

      {/* Label area — LCD-style */}
      <div className="scribble-label-wrap">
        <span className="scribble-label">{data.label || '—'}</span>
        {data.sublabel && (
          <span className="scribble-sublabel">{data.sublabel}</span>
        )}
      </div>

      {/* Icon (optional) */}
      {data.icon && <span className="scribble-icon">{data.icon}</span>}
    </div>
  );
}