import type { PageSection } from '../../../lib/page-editor-service.js'
import { bool, str, type PostRenderContext } from './parts.js'

/** A short author biography block, driven by the post's author context. */
export function AuthorBioSection({
  section,
  context,
}: {
  section: PageSection
  context?: PostRenderContext
}) {
  const c = section.content
  const heading = str(c, 'heading', 'About the author')
  const showAvatar = bool(c, 'showAvatar', true)
  const showSocial = bool(c, 'showSocial', true)

  const name = context?.author?.name || 'Author name'
  const bio =
    context?.author?.bio || "The author's bio will appear here once it is set on their profile."
  const avatarUrl = context?.author?.avatarUrl
  const initials = name
    .split(/\s+/)
    .map((p) => p[0] ?? '')
    .join('')
    .slice(0, 2)
    .toUpperCase()

  return (
    <div className="mx-auto max-w-3xl px-6">
      <div className="flex items-start gap-4 rounded-xl border border-zinc-200 bg-zinc-50 p-5">
        {showAvatar &&
          (avatarUrl ? (
            <img
              src={avatarUrl}
              alt={name}
              className="h-14 w-14 shrink-0 rounded-full object-cover"
            />
          ) : (
            <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-violet-100 text-sm font-medium text-violet-700">
              {initials || '?'}
            </span>
          ))}
        <div className="min-w-0">
          {heading && (
            <p className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
              {heading}
            </p>
          )}
          <p className="mt-0.5 text-base font-medium text-zinc-900">{name}</p>
          <p className="mt-1 text-sm leading-relaxed text-zinc-600">{bio}</p>
          {showSocial && (
            <div className="mt-2 flex gap-3 text-sm text-violet-600">
              <span>Twitter</span>
              <span>LinkedIn</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
