import React, { ReactNode } from 'react'
import { BgKey } from '../interfaces'
import {gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgViolet} from '../colors'
import { useAppSelector } from '../stores/hooks'

type Props = {
  bg: BgKey
  children?: ReactNode
}

export default function SectionFullScreen({ bg, children }: Props) {
  const darkMode = useAppSelector((state) => state.style.darkMode)

  let componentClass = 'flex min-h-screen items-center justify-center '

  if (darkMode) {
    componentClass += gradientBgDark
  } else if (bg === 'violet') {
    componentClass += gradientBgViolet
  } else if (bg === 'purplePink') {
    componentClass += gradientBgPurplePink
  } else if (bg === 'pinkRed') {
    componentClass += gradientBgPinkRed
  }

  return <div className={componentClass}>{children}</div>
}