import { PropsWithChildren, ReactNode } from 'react'

import styles from './StickySideColumns.module.scss'

interface StickySideColumnsProps {
  left?: ReactNode
  right?: ReactNode
}

export const StickySideColumns = ({
  left,
  right,
  children
}: PropsWithChildren<StickySideColumnsProps>) => {
  return (
    <div className={styles.container}>
      <div className={`${styles.sidesWrap} ${styles.files}`}>
        <div className={styles.sides}>{left}</div>
      </div>
      <div className={styles.content}>{children}</div>
      <div className={styles.sidesWrap}>
        <div className={styles.sides}>{right}</div>
      </div>
    </div>
  )
}