import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { CloseBtn } from '../CloseBtn';
import { Modal } from '../Modal';
import { Slider } from '../Slider';
import { ISlider } from './SliderFullscreen.interface';
import * as S from './SliderFullscreen.style';

export const SliderFullscreen = function SliderFullscreen(props: ISlider): React.ReactElement {
   const { visible = false, onRequestClose, ...rest } = props;

   return (
      <Modal show={visible} onRequestClose={onRequestClose}>
         <S.Container>
            <div className="close-icon-float">
               <CloseBtn color="white" onClick={onRequestClose} />
            </div>
         </S.Container>
         <Slider {...rest} bgColor="transparent" height="90%" width="100%" />
      </Modal>
   );
};
