import DOMPurify from 'dompurify'
import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { longDate } from '../../lib/format.js'
import { api } from '../../api/client.js'

export default function FiveOnFriday() {
  const { loading, error, data } = useAsync(() => api.posts('five-on-friday'))
  const issues = data || []

  return (
    <PublicLayout section="website">
      <div className="shell-mid page-body">
        <PageHeader
          eyebrow="Community"
          title="Five on Friday"
          lead="Five short notes from the week — what we built, what is next, and one small thing we are excited about."
        />
        <section style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {loading && <Loading />}
          {error && <ErrorState message="Could not load Five on Friday right now." />}
          {!loading && !error && issues.length === 0 && (
            <EmptyState>No Five on Friday posts yet — the first one is coming soon.</EmptyState>
          )}
          {issues.map((it) => (
            <article key={it.id} className="panel" style={{ padding: 30 }}>
              <div
                className="sans"
                style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, fontSize: '0.74rem', letterSpacing: '0.08em', textTransform: 'uppercase' }}
              >
                <span style={{ color: 'var(--accent)', fontWeight: 700 }}>Five on Friday</span>
                <span className="dim">{longDate(it.published_at || it.created_at)}</span>
              </div>
              <h2 className="display" style={{ margin: '0 0 12px', fontSize: '1.5rem', color: 'var(--head)' }}>
                {it.title}
              </h2>
              {it.body ? (
                <div className="prose" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(it.body) }} />
              ) : (
                it.excerpt && <p style={{ margin: 0, color: 'var(--text)' }}>{it.excerpt}</p>
              )}
            </article>
          ))}
        </section>
      </div>
    </PublicLayout>
  )
}