import React from 'react'
import AppContainer from '../appContainer'
import Image from 'next/image'
import { FiUsers, FiArrowLeft } from 'react-icons/fi'
import Link from 'next/link'
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardText,
  MDBCardTitle,
  MDBContainer,
  MDBIcon,
  MDBTypography
} from 'mdb-react-ui-kit'
import { Box, Divider, ScaleFade, SimpleGrid } from '@chakra-ui/react'
import { AppProduction, VueApi } from '../../lib/api'
import axios from 'axios'
import { data } from 'autoprefixer'
import { Link as LinkChakra  } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@chakra-ui/icons'

const Recruitment = dataoccupational => {
  const Parallax = ({ quality }) => {
    return `../resource/parallax/Directors.jpg`
  }

  return (
    <div>
      <AppContainer title={'فرصت های شغلی بیمارستان مهر  ایرانیان پرند'}>
        <div className='parallax-container'>
          <div className={'flex  flex-column'}>
            <div className={'mb-5'}>
              <h2 className={'center-align bk-med text-white  header_back service-text dana font-weight-bold'}>
                فرصت های شغلی    
              </h2>
            </div>
            <br />
            <br />
            <div className={'mt-2'}>
              <br />
              <br />
              <p
                className={'center-align bk-light RTL text-white mt-5  header_back service-text dana font-weight-bold'}
              >
                فرصت‌هایی برای اینکه رویاهای خودتان را در کنار ما بسازید.
              </p>
            </div>
          </div>
          <Image
            loader={Parallax}
            src='Parallax.png'
            className={'responsive-img shadow-5'}
            alt='فرصت های شغلی بیمارستان مهر  ایرانیان پرند'
            width={3000}
            height={1300}
          />
        </div>
        <div className='lg:mx-20 sm:mx-5 mt-5'> 
          <div className={'bk-med flex justify-content-center W-100 align-items-center flex-col'}>
            <MDBTypography className={'bk-md text-primary-teal font-weight-bold'} variant={'h3'}>
              فرصت های همکاری
            </MDBTypography>
            <MDBTypography className={'bk-light text-primary-teal mt-2'}>
              ردیف شغلی مورد علاقه خود را انتخاب کنید{' '}
            </MDBTypography>
            <LinkChakra as={Link} className='cursor-pointer'  href='/recruitment/inquiry'>
              <div className='border-2 text-sm cursor-pointer'>
              استعلام وضعیت درخواست استخدام <ExternalLinkIcon mx='2px' />

              </div>
            </LinkChakra>
          </div>
          <Divider />
          <SimpleGrid dir={'rtl'} columns={[1, 2, 4]} spacing={5}>
            {dataoccupational.data.data.map(item => (
              <ScaleFade initialScale={0.9} in={() => setTimeout(() => true, 3000)}>
                <Box key={item.id}>
                  <MDBCard className={'jobs-item-card rounded-6'}>
                    <MDBCardBody className={'flex  flex-col align-items-center justify-content-between'}>
                      <div>
                        <FiUsers size={35} />
                      </div>
                      <MDBCardTitle className={'bk-med mt-2 right'}>{item.title} </MDBCardTitle>
                      <Link href={`recruitment/item/${item.id}`}>
                        <MDBBtn rounded size={'sm'} className={'mt-2 flex align-items-center bk-light bg-primary-teal'}>
                          مشاهده
                          <FiArrowLeft className={'mr-2'} />
                        </MDBBtn>
                      </Link>
                    </MDBCardBody>
                  </MDBCard>
                </Box>
              </ScaleFade>
            ))}
          </SimpleGrid>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
      </AppContainer>
    </div>
  )
}

export default Recruitment

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await axios
    .get(`${AppProduction}public/job/occupational/`)
    .then(res => {
      return res.data
    })
    .catch(err => {
      console.log(err)
    })
  const data = await res

  // Pass data to the page  via props
  return { props: { data } }
}