'use client'

import React from "react"
import clsx from "clsx"

import styles from './Banner.module.sass'

export interface IProps extends React.ComponentPropsWithoutRef<'div'> {
  description?: React.ReactNode
  image?: React.ReactNode
}

export const Banner: React.FC<IProps> = (props) => {
  const {title, description, image, className, ...rest} = props
  return (
    <div className={clsx(className, styles.container)} {...rest}>
      <div className={styles.main}>
        <div className={styles.start}>
          <h1>{title}</h1>
          {description && <div>{description}</div>}
        </div>
        <div className={styles.end}>
          {image}
        </div>
      </div>
    </div>
  )
}