supabase/apps/www/components/Sections/ProductHeaderCentered.tsx

import styles from '~/styles/animations.module.css'
import { PlayCircle } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { Button, cn } from 'ui'

import AnnouncementBadge from '../Announcement/Badge'
import ProductIcon from '../ProductIcon'

interface Types {
  h1: string | React.ReactNode
  subheader: string | React.ReactNode
  icon?: string
  className?: string
  title?: string
  image?: string | React.ReactNode
  footer?: React.ReactNode
  announcement?: {
    url: string
    announcement: string
    badge?: string
    target?: '_self' | '_blank' | string
  }
  cta?: {
    label?: string
    link: string
    icon?: React.ReactNode
  }
  secondaryCta?: {
    label?: string
    link: string
    icon?: React.ReactNode
  }
  video?: string
}

const ProductHeaderCentered = (props: Types) => (
  <div className={cn('container relative w-full mx-auto px-6 sm:px-16 xl:px-20', props.className)}>
    <div className="flex flex-col text-center items-center">
      {props.image &&
        (typeof props.image === 'string' ? (
          <div className="relative w-full max-w-[630px] mx-auto z-0 aspect-[2.3/1] -mt-8 -mb-8 md:-mb-12 lg:-mb-12">
            <Image
              src={props.image}
              priority
              layout="fill"
              objectFit="contain"
              objectPosition="top"
              alt=""
            />
          </div>
        ) : (
          <div className="col-span-12 mt-8 lg:col-span-7 lg:mt-0 xl:col-span-6 xl:col-start-7">
            {props.image}
          </div>
        ))}
      <div className="relative w-full z-10 flex flex-col items-center space-y-2 mx-auto max-w-2xl">
        {props.announcement && (
          <AnnouncementBadge {...props.announcement} className="pb-4 md:pb-4 z-10" />
        )}
        <div>
          {props.icon || props.title ? (
            <div className="mb-2 flex justify-center items-center gap-3">
              {props.icon && <ProductIcon icon={props.icon} />}
              {props.title && (
                <span
                  className="text-primary font-mono uppercase tracking-widest text-sm"
                  key={`product-name-${props.title}`}
                >
                  {props.title}
                </span>
              )}
            </div>
          ) : null}
        </div>
        <div className={cn('flex flex-col items-center', styles['appear-from-bottom'])}>
          <h1 className="h1 text-3xl md:text-4xl! lg:text-5xl! text-balance" key={`h1`}>
            {props.h1}
          </h1>
          <p className="p text-foreground-light text-balance">{props.subheader}</p>
        </div>
        <div className="w-full sm:w-auto flex flex-col items-stretch sm:flex-row pt-2 sm:items-center gap-2">
          {props.cta && (
            <Button variant="primary" size="medium" iconRight={props.cta.icon} asChild>
              <Link href={props.cta.link} as={props.cta.link}>
                {props.cta.label ?? 'Start for free'}
              </Link>
            </Button>
          )}
          {props.video && (
            <Button size="medium" icon={<PlayCircle />} asChild>
              <Link href={props.video} as={props.video}>
                Watch video
              </Link>
            </Button>
          )}
          {props.secondaryCta && (
            <Button size="medium" iconRight={props.secondaryCta.icon} asChild>
              <Link href={props.secondaryCta.link} as={props.secondaryCta.link}>
                {props.secondaryCta.label}
              </Link>
            </Button>
          )}
        </div>
        {props.footer && <div className="mb-4">{props.footer}</div>}
      </div>
    </div>
  </div>
)

export default ProductHeaderCentered