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

/** A highlighted pull quote with optional attribution. */
export function PullQuoteSection({ section }: { section: PageSection }) {
  const c = section.content
  const quote = str(c, 'quote')
  const attribution = str(c, 'attribution')
  const role = str(c, 'role')

  if (!quote) return null

  return (
    <figure className="mx-auto max-w-3xl px-6">
      <blockquote className="border-l-4 border-violet-500 pl-6">
        <p className="text-xl leading-relaxed font-medium text-zinc-800 sm:text-2xl">“{quote}”</p>
      </blockquote>
      {(attribution || role) && (
        <figcaption className="mt-3 pl-6 text-sm text-zinc-500">
          {attribution && <span className="font-medium text-zinc-700">{attribution}</span>}
          {attribution && role && <span aria-hidden> · </span>}
          {role}
        </figcaption>
      )}
    </figure>
  )
}
