import { Logo } from '@/components/Logo/Logo'
import styles from "./styles.module.scss"

export interface BannerProps {
  textLine1?: string | null
  textLine2?: string | null
  textLine3?: string | null
  backgroundColor?: string | null
  backgroundImage?: string | 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: React.CSSProperties = {
    ...(backgroundColor && { backgroundColor }),
    ...(backgroundImage && { backgroundImage: `url(${backgroundImage})` }),
    ...(backgroundPosition && { backgroundPosition }),
    ...(backgroundSize && { backgroundSize }),
  }

  return (
    <div className={styles.banner} style={bannerStyle}>
      <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>
  )
}
