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 {VueApi} from "../../lib/api";
import axios from "axios";
import {data} from "autoprefixer";

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>
                <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'}>فرصت های همکاری</MDBTypography>
                        <MDBTypography className={'bk-light text-primary-teal mt-2'}>ردیف شغلی مورد علاقه خود را انتخاب کنید  </MDBTypography>
                    </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>
                </MDBContainer>
                <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('https://mehriranianco.ir/api/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 } }
}