import Image from 'next/image'
import type { CSSProperties } from 'react'
import { Logo } from '@/components/Logo/Logo'
import type { Media } from '@/payload-types'
import styles from "./styles.module.scss"

const backgroundSizeToObjectFit: Record<
  'cover' | 'contain' | 'auto',
  CSSProperties['objectFit']
> = {
  cover: 'cover',
  contain: 'contain',
  auto: 'none',
}

export interface BannerProps {
  textLine1?: string | null
  textLine2?: string | null
  textLine3?: string | null
  backgroundColor?: string | null
  backgroundImage?: Media | null
  backgroundPosition?:
    | 'center center'
    | 'top center'
    | 'bottom center'
    | 'center left'
    | 'center right'
    | 'top left'
    | 'top right'
    | 'bottom left'
    | 'bottom right'
    | null
  backgroundSize?: 'cover' | 'contain' | 'auto' | null
}

export const Banner = ({
  textLine1 = 'Katholische Pfarrei',
  textLine2 = 'Heilige Drei Könige',
  textLine3 = 'Nord-Neukölln',
  backgroundColor,
  backgroundImage,
  backgroundPosition = 'center center',
  backgroundSize = 'cover',
}: BannerProps) => {
  const bannerStyle: CSSProperties = {
    ...(backgroundColor && { backgroundColor }),
  }

  return (
    <div className={styles.banner} style={bannerStyle}>
      {backgroundImage?.url && (
        <Image
          src={backgroundImage.url}
          alt={backgroundImage.alt ?? ''}
          fill
          priority
          sizes="100vw"
          className={styles.backgroundImage}
          style={{
            objectFit: backgroundSizeToObjectFit[backgroundSize ?? 'cover'],
            objectPosition: backgroundPosition ?? 'center center',
          }}
        />
      )}
      <div className={styles.logo}>
        <Logo color={"#ffffff33"} height={200} />
      </div>
      <div className={styles.nameContainer}>
        {textLine1 && <div className={styles.catholic}>{textLine1}</div>}
        {textLine2 && <div className={styles.name}>{textLine2}</div>}
        {textLine3 && <div className={styles.location}>{textLine3}</div>}
      </div>
    </div>
  )
}
