import React from 'react';
import { formatDateTime } from 'src/utilities/formatDateTime';

import type { Post } from '@/payload-types';
import { formatAuthors } from '@/utilities/formatAuthors';

export const PostHero: React.FC<{
  post: Post;
}> = ({ post }) => {
  const { categories, populatedAuthors, updatedAt, title } = post;

  const hasAuthors =
    populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== '';

  return (
    <div className='container'>
      <div className='mx-auto max-w-[48rem]'>
        <div className='mb-6 text-sm uppercase'>
          {categories?.map((category, index) => {
            if (typeof category === 'object' && category !== null) {
              const { title: categoryTitle } = category;

              const titleToUse = categoryTitle || 'Untitled category';

              const isLast = index === categories.length - 1;

              return (
                <React.Fragment key={index}>
                  {titleToUse}
                  {!isLast && <React.Fragment>, &nbsp;</React.Fragment>}
                </React.Fragment>
              );
            }
            return null;
          })}
        </div>

        <h1 className='mb-6 text-3xl md:text-5xl lg:text-6xl'>{title}</h1>

        <div className='flex flex-col gap-4 md:flex-row md:gap-16'>
          {hasAuthors && (
            <div className='flex flex-col gap-4'>
              <div className='flex flex-col gap-1'>
                <p className='text-sm'>Author</p>

                <p>{formatAuthors(populatedAuthors)}</p>
              </div>
            </div>
          )}
          {updatedAt && (
            <div className='flex flex-col gap-1'>
              <p className='text-sm'>Date Updated</p>

              <time dateTime={updatedAt}>{formatDateTime(updatedAt)}</time>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};