import { toMilitaryDTG } from '@/lib/utils/date'
import Image from 'next/image'
import Link from 'next/link'
import { ArticleContent } from '~/types/keystatic'
import styles from './PageHeader.module.css'

interface PageHeaderProps {
  article: ArticleContent
  breadcrumbs: string[]
  author?: Author | null
  tags?: Tag[]
}

interface Author {
  slug: string
  name: string
  avatar: string | null
  description: string
}

interface Tag {
  slug: string
  name: string
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  article,
  breadcrumbs,
  author,
  tags,
}) => {
  const { title, publishing, cover } = article
  return (
    <header className={styles.container}>
      <div className={styles.overline}>
        <div className={styles.bcwrapper}>
          <ul className={styles.breadcrumbs}>
            {breadcrumbs.map((item) => (
              <li key={item}>/{item}</li>
            ))}
          </ul>
          <time className={styles.publishdate}>
            {toMilitaryDTG(publishing.publishDate)}
          </time>
        </div>
      </div>
      <div className={styles.wrapper}>
        <h1 className={styles.title}>{title}</h1>
      </div>
      {cover && cover.showInHeader && !!cover.src && (
        <figure className={styles.cover}>
          <Image
            src={cover.src}
            alt={cover.alt || 'Standard ALT'}
            width={0}
            height={0}
            sizes="100vw"
            className={styles.image}
          />
          <figcaption className={styles.caption}>
            <div className={styles.captionwrapper}>
              {cover.caption ? (
                <span className={styles.captiontext}>{cover.caption}</span>
              ) : (
                <span className={styles.covermeta}>{cover.src}</span>
              )}
            </div>
          </figcaption>
        </figure>
      )}
      <div className={styles.metadata}>
        {author && (
          <div className={styles.metasection}>
            <span className={styles.metalabel}>Author</span>
            <span className={styles.author}>{author.name}</span>
          </div>
        )}
        {tags && tags.length > 0 && (
          <div className={styles.metasection}>
            <span className={styles.metalabel}>Tags</span>
            <ul className={styles.taglist}>
              {tags.map((tag) => (
                <li key={tag.slug} className={styles.tag}>
                  <Link className={styles.link} href={`/tags/${tag.slug}`}>
                    {tag.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        )}
        {publishing.editDate && (
          <div className={styles.metasection}>
            <span className={styles.metalabel}>Last Update</span>
            <time className={styles.updatedate}>
              {toMilitaryDTG(publishing.editDate)}
            </time>
          </div>
        )}
      </div>
    </header>
  )
}
