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

const Recruitment = jobs => {
  console.log(jobs)
  const Parallax = ({ quality }) => {
    return `../../resource/parallax/33012321.jpg`
  }
  const router = useRouter()
  const { category_id } = router.query

  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={category_id}
            width={3000}
            height={1300}
          />
        </div>
        <MDBContainer className={'mt-5'}>
          <div className={'bk-med flex justify-content-center align-items-center flex-col'}>
            <MDBTypography className={'bk-md text-primary-teal font-weight-bold'} variant={'h3'}>
              {jobs.jobs.name.title}{' '}
            </MDBTypography>
            <MDBTypography className={'bk-light text-primary-teal mt-2'}>
              شغل مورد علاقه خود را انتخاب کنید{' '}
            </MDBTypography>
          </div>
          <Divider />
          <SimpleGrid dir={'rtl'} columns={[1, 1, 3]} spacing={3}>
            {jobs.jobs.data &&
              jobs.jobs.data.map(item => (
                <Box key={item.id}>
                  <Link href={`/recruitment/item/request/${item.id}`}>
                    <MDBCard className={'jobs-item-card rounded-6'}>
                      <MDBCardBody
                        className={
                          'flex align-items-center lg:flex-row md:flex-col sm:flex-col justify-content-between'
                        }
                      >
                        <div>
                          <MDBCardTitle title={item.title} className={'bk-med text-summery-2 mt-2 right'}>
                            {item.title}{' '}
                          </MDBCardTitle>
                        </div>
                        <div>
                          <Link href={`/recruitment/item/request/${item.id}`}>
                            <MDBBtn
                              rounded
                              size={'sm'}
                              className={'mt-2 flex align-items-center bk-light bg-primary-teal'}
                            >
                              درخواست همکاری
                              <FiArrowLeft className={'ml-2'} />
                            </MDBBtn>
                          </Link>
                        </div>
                      </MDBCardBody>
                    </MDBCard>
                  </Link>
                </Box>
              ))}
          </SimpleGrid>
        </MDBContainer>
        <br />
        <br />
        <br />
        <br />
      </AppContainer>
    </div>
  )
}

export async function getServerSideProps(ctx) {
  // Fetch data from external API
  const { query } = ctx

  const res = await axios
    .get(`${AppProduction}public/job/${query.category_id}`)
    .then(res => {
      return res.data
    })
    .catch(err => {
      console.log(err)
    })
  const jobs = await res

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

export default Recruitment