function ControlIcon({ id }) {
  const commonProps = {
    width: 22,
    height: 22,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 1.8,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };

  if (id === 'mute') {
    return (
      <svg {...commonProps}>
        <path d="M11 5a2 2 0 0 1 4 0v5a2 2 0 0 1-4 0z" />
        <path d="M19 10a7 7 0 0 1-.6 2.8" />
        <path d="M5.6 5.6 18.4 18.4" />
        <path d="M9 10a3 3 0 0 0 4.7 2.5" />
        <path d="M12 19v3" />
        <path d="M8 22h8" />
      </svg>
    );
  }

  if (id === 'keypad') {
    return (
      <svg {...commonProps}>
        <rect x="4" y="4" width="4" height="4" rx="1" />
        <rect x="10" y="4" width="4" height="4" rx="1" />
        <rect x="16" y="4" width="4" height="4" rx="1" />
        <rect x="4" y="10" width="4" height="4" rx="1" />
        <rect x="10" y="10" width="4" height="4" rx="1" />
        <rect x="16" y="10" width="4" height="4" rx="1" />
        <rect x="4" y="16" width="4" height="4" rx="1" />
        <rect x="10" y="16" width="4" height="4" rx="1" />
        <rect x="16" y="16" width="4" height="4" rx="1" />
      </svg>
    );
  }

  if (id === 'speaker') {
    return (
      <svg {...commonProps}>
        <path d="M5 9v6h4l5 4V5l-5 4z" />
        <path d="M18 9a4 4 0 0 1 0 6" />
        <path d="M20.5 6.5a7.5 7.5 0 0 1 0 11" />
      </svg>
    );
  }

  return (
    <svg {...commonProps}>
      <path d="M16 3h5v5" />
      <path d="M21 3l-7 7" />
      <path d="M8 7H3v5" />
      <path d="M3 12l7-7" />
      <path d="M16 21h5v-5" />
      <path d="M21 21l-7-7" />
    </svg>
  );
}

export function CallControls({ controls, isMobile = false }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: isMobile
          ? 'repeat(2, minmax(0, 1fr))'
          : 'repeat(4, minmax(120px, 1fr))',
        gap: '1rem',
      }}
    >
      {controls.map((control) => (
        <button
          key={control.id}
          type="button"
          style={{
            border: '1px solid rgba(255, 255, 255, 0.12)',
            borderRadius: '24px',
            padding: '1rem',
            background: 'rgba(255, 255, 255, 0.06)',
            color: '#fff',
            display: 'grid',
            gap: '0.35rem',
            justifyItems: 'start',
            textAlign: 'left',
          }}
        >
          <span
            aria-hidden="true"
            style={{
              width: 48,
              height: 48,
              borderRadius: '16px',
              background: 'rgba(255, 255, 255, 0.1)',
              display: 'grid',
              placeItems: 'center',
              fontWeight: 800,
              color: '#fff',
            }}
          >
            <ControlIcon id={control.id} />
          </span>
          <strong>{control.label}</strong>
          <span style={{ color: 'rgba(255, 255, 255, 0.66)', fontSize: '0.9rem' }}>
            {control.hint}
          </span>
        </button>
      ))}
    </div>
  );
}