import React from 'react'
import { styled } from 'styled-components'
import IconMedicalKit from 'public/assets/icons/icon-medical-kit.svg'
import { Colors, Gradient } from '@/app/components/common/variable'
import { device } from '@/app/components/common/Devices'
import { FlexBox, WhiteCard } from '@/app/components/common/HOC'
import H5 from '@/app/components/common/H5'
import P from '@/app/components/common/P'
import { Col } from 'react-bootstrap'
import Skeleton from 'react-loading-skeleton'
import { useRouter } from 'next/navigation'

const JobsCategoryCardRow = styled.div`
    cursor: pointer;
    height: 100%;
    .job-card {
        position: relative;
        overflow: hidden;
        z-index: 1;
        height: 100%;
        &::after,
        &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            transition: all 0.4s;
        }
        &::before {
            top: -100%;
            right: -100%;
            left: auto;
            background: ${Colors.white};
            border-radius: 0 0 0 100%;
            z-index: -1;
        }
        &::after {
            opacity: 0;
            background: ${Gradient.primary};
            z-index: -2;
        }
        &:hover {
            &::after,
            &::before {
                transition: all 0.4s;
            }
            &::before {
                top: -30%;
                right: -30%;
                width: 150%;
                height: 150%;
                transition: all 0.8s;
                border-radius: 100%;
            }
            &::after {
                opacity: 1;
            }
        }
        .icon {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background: ${Gradient.primary};
            margin-bottom: 30px;
        }
        h5 {
            line-height: 1.2;
            font-weight: 600;
            margin-bottom: 30px;
            /* max-width: 165px; */
            text-transform: capitalize;
        }
        p {
            margin: 0;
            line-height: 1;
        }
    }
    @media ${device.tablet} {
        .job-card {
            padding: 20px;
        }
    }

    @media ${device.mobileS} {
        .job-card {
            text-align: center;
            p{
                text-align: center;
            }
            .icon {
                width: 56px;
                height: 56px;
                margin-bottom: 20px;
                svg {
                    height: 26px;
                }
            }
            h5 {
                max-width: 100%;
                margin-bottom: 20px;
            }
        }
    }
`

const JobsCategoryCard = ({
    categoryName,
    jobOpeningCount,
    loading,
    categoryId
}) => {
    const { push } = useRouter()
    // if (loading) {
    //     return Array.from({ length: 12 }).map(() => {
    //         return (
    //             <Col xl="3" lg="4" md="4" sm="6" className="jobs-category-col">
    //                 <JobsCategoryCardRow>
    //                     <WhiteCard className="card-border job-card">
    //                         <FlexBox className="icon inline-flex">
    //                             <IconMedicalKit />
    //                         </FlexBox>
    //                         {loading ? (
    //                             <Skeleton count={5} />
    //                         ) : (
    //                             <H5 text={'Head'} />
    //                         )}

    //                         <P text={`Job Available: loading`} />
    //                     </WhiteCard>
    //                 </JobsCategoryCardRow>
    //             </Col>
    //         )
    //     })
    // }
    return (
        <>
            {loading ? (
                <>
                    <JobsCategoryCardRow>
                        <WhiteCard className="light-border job-card skeleton">
                            <Skeleton circle count={1} width={70} height={70} />
                            <Skeleton width="100%" height={15} count={1} />
                            <Skeleton width="100%" height={15} count={1} />
                        </WhiteCard>
                    </JobsCategoryCardRow>
                </>
            ) : (
                <JobsCategoryCardRow
                    onClick={() => {
                        push(
                            `/live-jobs/?query=${
                                typeof window !== 'undefined'
                                    ? btoa(
                                          JSON.stringify({
                                              categoryId
                                          })
                                      )
                                    : ''
                            }`
                        )
                    }}
                >
                    <WhiteCard className="card-border job-card">
                        <FlexBox className="icon inline-flex">
                            <IconMedicalKit />
                        </FlexBox>
                        <H5 text={categoryName} />
                        <P text={`Job Available: ${jobOpeningCount}`} />
                    </WhiteCard>
                </JobsCategoryCardRow>
            )}
        </>
    )
}

export default JobsCategoryCard