pussy-landing/src/components/xp/containerGradient/DisplayTitle/DisplayTitle.tsx

import cx from "classnames"
import * as styles from "./DisplayTitle.module.scss"
import { ColorLamp } from "../types"
import React from "react"

type Props = {
  title: string | React.ReactNode
  children?: React.ReactNode
  color?: ColorLamp

  // temp prop
  animationState?: string

  // to remove padding
  inDisplay?: boolean

  image?: React.ReactNode
  isImgLarge?: boolean
}

// TODO: need remove animation from this component
function DisplayTitle({
  title,
  children,
  color = "white",
  inDisplay,
  image,
  isImgLarge,

  animationState: state = "entered",
}: Props) {
  const content = (
    <div className={cx(styles.displayTitle, styles[color])}>
      <div
        className={cx(
          styles.displayTitleContent,
          styles[`displayTitleContent${state}`]
        )}
      >
        {image && (
          <div
            className={cx(styles.imageWrapper, {
              [styles.large]: isImgLarge,
            })}
          >
            {image}
          </div>
        )}

        {title}

        {children && <div className={styles.content}>{children}</div>}
      </div>
    </div>
  )

  if (inDisplay) {
    return <div className={styles.noPaddingWrapper}>{content}</div>
  }

  return content
}

export default DisplayTitle