import React, { useEffect, useState } from 'react'
import PageTitle from './shared/PageTitle'
import {ReactComponent as ProcessSvg} from './../assets/images/Process.svg';
import Wrapper from '../layout/Wrapper';
import { useNavigate } from 'react-router-dom';
import ProcessSlider from './ProcessSlider';
import { useWindowInfo } from '@faceless-ui/window-info';
import useWindowSize from '../hooks/useWindowSize';


const _data = {
    heading: "How We Do It",
    subheading: "Our process",
    imgUrl: "",
    btn: "check it out"
}

const ProcessSection = () => {

  const [isMobile, setIsMobile] = useState(false);

  const windowInfo = useWindowSize();

  useEffect(() => {
    console.log(windowInfo.width);
    if (windowInfo.width < 1000) 
    setIsMobile(true);
    else
    setIsMobile(false);
  },[windowInfo]);

  const link = useNavigate();

  return (
    <Wrapper padding={" py-90p"} hideOverflow>
        
        <div className='w-full'>
        <PageTitle heading={_data.heading} subheading={_data.subheading} color left />
        </div>
        
        
        <div className="relative mx-auto my-32p md:my-90p">
          {!isMobile ? (
             <div className='w-full' draggable >
                <ProcessSvg className='' />
            </div> 
          ) :
          (
            <div className='' >
            <ProcessSlider/>
        </div>
          )
        }
           
           
          </div>
          <div className='flex justify-center w-full'>
              <button className="btn-secondary" onClick={()=>link('/process')}>{_data.btn}</button>
          </div>
        
        
    
    </Wrapper>
    
  )
}

export default ProcessSection