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'

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 = () => {
  return (
    <JobsCategoryCardRow>
        <WhiteCard className='card-border job-card'>
            <FlexBox className='icon inline-flex'><IconMedicalKit/></FlexBox>
            <H5 text={'Allied Health Professionals'}/>
            <P text={'Job Available: 12'}/>
        </WhiteCard>
    </JobsCategoryCardRow>
  )
}

export default JobsCategoryCard