// SocialPreview.jsx — live per-channel social card mock.
function SocialPreview({ channel, message, promo, account }) {
  const isIG = channel === 'instagram';
  const isX = channel === 'x';
  const handle = '@' + (account.handle || 'tropicalescapes');
  const initials = (account.name || 'Tropical Escapes').split(' ').map((w) => w[0]).slice(0, 2).join('');

  return (
    <div className={'sp-social ' + (isX ? 'sp-social--x' : '')}>
      <div className="sp-social-top">
        <div className="sp-social-avatar">{initials}</div>
        <div className="sp-social-meta">
          <b>{account.name || 'Tropical Escapes'}{isX && <span style={{ fontWeight: 400, color: 'var(--hub-soft)' }}> · {handle}</span>}</b>
          <span>{isX ? 'now' : 'Sponsored · ' + channelName(channel)}</span>
        </div>
      </div>
      <div className="sp-social-body">{message || 'Your post message will appear here.'}</div>
      <div className={'sp-social-img ' + (isIG ? 'sp-social-img--ig' : '')} style={{ backgroundImage: 'url(' + promo.image + ')' }}></div>
      <div className="sp-social-foot">
        <span><i data-lucide="thumbs-up"></i>Like</span>
        <span><i data-lucide="message-circle"></i>Comment</span>
        <span><i data-lucide="share-2"></i>Share</span>
      </div>
    </div>
  );
}

function channelName(c) {
  return { facebook: 'Facebook', instagram: 'Instagram', x: 'X', linkedin: 'LinkedIn' }[c] || c;
}

window.SocialPreview = SocialPreview;
window.channelName = channelName;