import React from 'react'
import { styled } from 'styled-components'
import { FlexBox, WhiteCard } from '../common/HOC'
import H5 from '../common/H5'
import P from '../common/P'
import CustomLink from '../common/CustomLink'
import { device } from '../common/Devices'
import { Colors } from '../common/variable'
import IconLocation from '@/public/assets/icons/icon-location.svg'
import IconJobRole from '@/public/assets/icons/icon-brifecase-tick-gray.svg'
import IconJobGrade from '@/public/assets/icons/icon-award.svg'
import IconApplyBy from '@/public/assets/icons/icon-send-square.svg'
import { timeDifference } from '@/function/comman'

const WhiteCardRow = styled.div`
    height: 100%;
    .related-jobs-card {
        padding: 30px;
        height: 100%;
        .card-head {
            flex-wrap: wrap;
            grid-column-gap: 14px;
            grid-row-gap: 24px;
            p {
                background: ${Colors.lightPink};
                margin: 0;
                border-radius: 45px;
                padding: 11px 23px;
                line-height: 1;
            }
            h5 {
                margin: 0;
                font-weight: 600;
                width: 100%;
            }
        }
        .card-body {
            padding-top: 26px;
            padding-bottom: 22px;
            .card-list {
                border-radius: 13px;
                background: #f9f1ff;
                padding: 24px;
                min-height: 270px;
                li {
                    display: flex;
                    align-items: flex-start;
                    font-size: 18px;
                    color: ${Colors.body};
                    margin-bottom: 30px;
                    svg {
                        margin-top: 3px;
                        margin-right: 18px;
                    }
                    &:last-child {
                        margin: 0;
                    }
                    b {
                        font-weight: 600;
                        margin-right: 4px;
                    }
                }
            }
        }
        .card-footer {
            justify-content: space-between;
            flex-wrap: wrap;
            grid-gap: 10px;
            h5 {
                font-weight: 600;
                line-height: 1;
                margin: 0;
            }
            a {
                padding: 5px 22px 7px;
                font-weight: 600;
            }
        }
    }
    @media ${device.laptop} {
        .related-jobs-card {
            padding: 20px;
            .card-head {
                grid-column-gap: 10px;
                grid-row-gap: 16px;
                p {
                    padding: 11px 20px;
                }
            }
            .card-body {
                padding: 16px 0;
            }
        }
    }
    @media ${device.mobileS} {
        .related-jobs-card {
            .card-body {
                .card-list {
                    padding: 16px;
                    li {
                        margin-bottom: 16px;
                        font-size: 14px;
                        svg {
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
    }
`

const RelatedJobsCard = ({
    jobTitle,
    shiftType,
    location,
    jobRole,
    jobGrade,
    createdAt,
    salary,
    salaryType,
    jobOpeningId,
    ...rest
}) => {
   

    const datalist = {
        list: [
            { key: 'Day shift' }
            // {"key" : "Night shift"}
        ]
    }
    return (
        <WhiteCardRow>
            <WhiteCard className="related-jobs-card card-shadow">
                <FlexBox className="card-head justify-start">
                    <H5 text={jobTitle} />
                    <P text={shiftType} className="small-18" />
                    {/* {datalist.list.map((dd)=><><P text={dd?.key} className="small-18"/></>)} */}
                </FlexBox>
                <div className="card-body">
                    <ul className="card-list">
                        <li>
                            <IconLocation />{' '}
                            <span>
                                <b>Location :</b>
                                {location}
                            </span>
                        </li>
                        <li>
                            <IconJobRole />{' '}
                            <span>
                                <b>Job Role :</b>
                                {jobRole}
                            </span>
                        </li>
                        <li>
                            <IconJobGrade />{' '}
                            <span>
                                <b>Job Grade :</b>
                                {jobGrade}
                            </span>
                        </li>
                        <li>
                            <IconApplyBy />{' '}
                            <span>
                                <b>Apply by :</b>
                                {timeDifference(createdAt)}
                            </span>
                        </li>
                    </ul>
                </div>
                <FlexBox className="card-footer">
                    <H5 text={`£${salary}`} />
                    <CustomLink
                        to={`/find-jobs/${jobOpeningId}`}
                        text={'Apply Now'}
                    />
                </FlexBox>
            </WhiteCard>
        </WhiteCardRow>
    )
}

export default RelatedJobsCard