import type { Profile } from '../types.js'

export function renderProfile(profile: Profile): string {
  return `
    <div class="profile">
      ${profile.avatar ? `<img src="${profile.avatar}" alt="avatar" class="profile-avatar">` : ''}
      <div class="profile-info">
        <h1 class="profile-name">${profile.displayName || profile.handle}</h1>
        <p class="profile-handle">@${profile.handle}</p>
        ${profile.description ? `<p class="profile-desc">${profile.description}</p>` : ''}
      </div>
    </div>
  `
}

export function mountProfile(container: HTMLElement, profile: Profile): void {
  container.innerHTML = renderProfile(profile)
}