import { PropsWithChildren, ReactNode } from 'react'

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

interface FilesProps {
  left: ReactNode
  right: ReactNode
  content: ReactNode
}

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