import React, { ElementType, FC } from 'react';
import Image from 'next/image';
import { cva } from 'class-variance-authority';
import background from '../../../assets/images/detail-hero-background.png';
import { Button, ButtonProps } from '../../../molecules/Button';
import { Section } from '../../../molecules/Section';
import { PersonProps } from '../../../types';
import { Breadcrumbs, BreadcrumbsProps } from '../../../molecules/Breadcrumbs';
import { SocialShareButtons } from '../../../molecules/Socials/SocialShareButtons';

interface DetailsHeroProps {
  headingAs?: ElementType;
  buttons?: ButtonProps[];
  image?: string;
  breadCrumbs?: BreadcrumbsProps['breadcrumbs'];
  publishDate?: string;
  author?: PersonProps;
  shareIcons?: boolean;
  slug?: string;
  title?: string;
}

export const section = cva([
  'tw-pt-4',
  'md:tw-pt-4',
  'sm:tw-pt-4',
  'lg:tw-pt-4',
  'tw-grid',
  'tw-gap-8',
  'md:tw-gap-12',
]);
export const wrapper = cva(['tw-grid', 'tw-gap-8', 'lg:tw-grid-cols-12']);
export const headlineStyles = cva([
  'tw-font-medium tw-text-display-sm',
  ' md:tw-text-display-md',
  'lg:tw-text-display-lg',
]);
export const buttonWrapper = cva(['tw-w-full', 'tw-flex', 'tw-gap-2', 'tw-flex-col', 'sm:tw-flex-row', 'md:tw-w-fit']);
export const content = cva(['tw-flex', 'tw-flex-col', 'tw-gap-4', 'lg:tw-col-span-7']);
export const imageStyles = cva(['tw-w-full', 'tw-rounded-xl', 'lg:tw-col-span-5']);

export const DetailsHero: FC<DetailsHeroProps> = ({
  buttons,
  headingAs = 'h1',
  breadCrumbs,
  image,
  publishDate,
  author,
  shareIcons = true,
  slug,
  title,
}) => {
  const H = headingAs;
  const date =
    publishDate &&
    new Date(publishDate).toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  const comma = date && author ? ', ' : '';
  const authorName = author && author.name && `by ${author.name}`;

  return (
    <Section className={section()}>
      <Image src={background} fill alt="" className="tw-object-cover -tw-z-10" />
      {breadCrumbs && breadCrumbs.length > 0 && <Breadcrumbs breadcrumbs={breadCrumbs} />}
      <div className={wrapper()}>
        <div className={content()}>
          <div className="tw-grid tw-gap-6">{title && <H className={headlineStyles()}>{title}</H>}</div>
          {slug && shareIcons && <SocialShareButtons slug={slug} title={title} />}
          {(date || authorName) && (
            <p className="tw-text-gray-300 tw-font-light">
              {date}
              {comma}
              {authorName}
            </p>
          )}
          {buttons && (
            <div className={buttonWrapper()}>
              {buttons.map(button => (
                <Button {...button} className="tw-w-full sm:tw-w-fit" />
              ))}
            </div>
          )}
        </div>
        {image && <Image src={image} width={490} height={275} alt={title || ''} className={imageStyles()} />}
      </div>
    </Section>
  );
};
