import React from 'react'
import { getClassName, getMergedClassNames, StyledComponent } from '../../../../components'
import zocksStyle from './Loader.module.scss'

export const Loader: React.FC<StyledComponent> = ({ styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('join-loader__loader-container', mergedStyles)}>
      <div className={getClassName('join-loader__preloader', mergedStyles)}>
        <div className={getClassName('join-loader__loading', mergedStyles)}>
          <div className={getClassName('join-loader__outer', mergedStyles)} />
          <div className={getClassName('join-loader__inner', mergedStyles)} />
          <div
            className={`${getClassName('join-loader__hold', mergedStyles)} ${getClassName(
              'join-loader__left',
              mergedStyles
            )}`}
          >
            <div className={getClassName('join-loader__left-fill', mergedStyles)} />
          </div>
          <div
            className={`${getClassName('join-loader__hold', mergedStyles)} ${getClassName(
              'join-loader__right',
              mergedStyles
            )}`}
          >
            <div className={getClassName('join-loader__right-fill', mergedStyles)}></div>
          </div>
        </div>
      </div>
    </div>
  )
}
