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";

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(`https://mehriranianco.ir/api/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;