// main-channel.js — 메인 채널 강조 CTA (4채널 그리드 아래 큰 버튼)
// cms_config.main_channel: { enabled, label, sublabel, url, icon }
//   icon: 'telegram' | 'kakao' | 'line' | 'instagram' (기본 telegram)
import { ICONS } from './icons.js';

export function renderMainChannel(cms) {
  const root = document.getElementById('main-channel-cta');
  if (!root) return;
  const m = cms.main_channel || {};

  // url 자체가 없는 경우(시드 안 됨)만 통째로 숨김. enabled=false는 흑백 X 표시(사용자 요청 2026-04-28).
  if (!m.url) {
    root.hidden = true;
    root.innerHTML = '';
    return;
  }

  const iconKey = (m.icon || 'telegram').toLowerCase();
  const icon = ICONS[iconKey] || ICONS.telegram;
  const label = m.label || '메인 채널 입장';
  const sublabel = m.sublabel || '';
  const disabled = m.enabled === false;

  root.hidden = false;
  root.innerHTML = `
    <a class="main-channel-cta__btn main-channel-cta__btn--${iconKey}${disabled ? ' is-disabled' : ''}"
       href="${disabled ? 'javascript:void(0)' : m.url}" ${disabled ? '' : 'target="_blank" rel="noopener"'}
       aria-label="${label}${disabled ? ' (교체중)' : ''}"
       ${disabled ? 'aria-disabled="true"' : ''}>
      <span class="main-channel-cta__pulse" aria-hidden="true"></span>
      <span class="main-channel-cta__icon">${icon}</span>
      <span class="main-channel-cta__text">
        <span class="main-channel-cta__label">${label}</span>
        ${sublabel ? `<span class="main-channel-cta__sub">${sublabel}</span>` : ''}
      </span>
      <span class="main-channel-cta__arrow" aria-hidden="true">→</span>
    </a>
  `;
}
