JobDisplayCard.jsx

import clsx from 'clsx';
import { useMemo } from 'react';
import Image from 'next/image';
import JobLocationIcon from '@/icons/JobLocationIcon';
import JobPositionIcon from '@/icons/JobPositionIcon';
// import JobSalaryIcon from '@/icons/JobSalaryIcon'
import Tag from '@/components/General/Tag';
import TopCandidateIcon from '@/icons/TopCandidateIcon';
import {
  parseEmploymentType,
  parseCreatedDate,
  parseWorkplace,
  parseSalaryRange,
} from '@/utils/etc';
import JobSalaryIcon from '@/icons/JobSalaryIcon';

// import BookmarkIcon from '@/icons/BookmarkIcon'

const JobDisplayCard = ({
  padding = 'narrow',
  topCandidate = false,
  salaryRange = '',
  role = '',
  location = '',
  salaryType = '',
  companyLogo = '',
  company = '',
  workplaceType = '',
  employmentTypes = [],
  createdDate = '',
  className,
  type = 'big',
  handleClick = () => {},
  ...props
}) => {
  const time = useMemo(() => {
    return parseCreatedDate(createdDate);
  }, [createdDate]);

  const workplace = useMemo(() => {
    return parseWorkplace(workplaceType);
  }, [workplaceType]);

  const employment = useMemo(() => {
    return parseEmploymentType(employmentTypes);
  }, [employmentTypes]);

  return (
    <div
      className={clsx(
        `cursor-pointer rounded-[8px]  pt-[42px] border border-[#E6E6E6] relative grid ${className}`,
        { 'pl-[18px] pb-[18px] pr-[18px]': padding === 'narrow' },
        { 'pl-[20px] pb-[20px] pr-[20px]': padding === 'wide' }
      )}
      onClick={handleClick}
      {...props}
    >
      <div>
        {topCandidate && (
          <div
            className={`
            py-[6px] pl-[10px] pr-[20px] rounded-tl-[8px] rounded-br-[8px]
            bg-[#00AEAC] text-[#009C9A] absolute top-0 left-0 bg-opacity-10
            text-[14px] font-semibold h-[30px] flex items-center space-x-2
          `}
          >
            <TopCandidateIcon />
            <span className="ml-2">Top Candidate</span>
          </div>
        )}
        {/* <button className='transition-all absolute top-[16px] right-[16px] hover:bg-gray-100 rounded-full p-1'>
        <BookmarkIcon />
      </button> */}
        <div
          className={clsx('w-[32px] h-[32px] rounded-md relative ', {
            'bg-blumine-90': companyLogo === null,
          })}
        >
          {companyLogo && (
            <Image alt="company logo" src={companyLogo} layout="fill" />
          )}
        </div>
        <h1
          className={clsx(
            'font-bold pt-1 line-clamp-2 text-[#1A1A1A]',
            { 'text-[20px]': type === 'big' },
            { 'text-[18px]': type === 'small' }
          )}
        >
          {role}
        </h1>
        <span className="text-[14px] mt-2 text-[#1B3286] font-semibold">
          {company}
        </span>
        <div className="space-y-1 pt-[10px] pb-[5px]">
          <div className="flex items-center space-x-1">
            <JobLocationIcon />
            <span className="text-[14px] text-[#5F5F5F]">
              {workplace === 'Remote' ? 'Online' : location}
            </span>
          </div>
          <div className="flex items-center space-x-1">
            <JobPositionIcon />
            <span className="text-[14px] text-[#5F5F5F]">{employment}</span>
          </div>
          {salaryRange && (
            <div className="flex items-center space-x-1">
              <JobSalaryIcon />
              <span className="text-[14px] text-[#5F5F5F]">
                {parseSalaryRange(salaryRange)}
              </span>
            </div>
          )}
        </div>
      </div>
      <div className="flex items-center justify-between mt-3 self-end">
        <div className="flex items-center space-x-[2px]">
          <Tag
            text={workplace}
            className="text-[#F03B9B] border border-[#F03B9B] bg-[#FC5EB21A] font-semibold pb-[2px] pt-0 px-2"
          />

          <Tag
            text={salaryType === 'paid' ? 'Paid' : 'Unpaid'}
            className="text-[#5C48E5] border border-[#5C48E5] bg-[#5C48E51A] font-semibold pb-[2px] pt-0 px-2"
          />
        </div>
        <div
          className={clsx(
            'text-[#A3A3A3] text-[600]',
            { 'text-[14px]': type === 'big' },
            { 'text-[12px]': type === 'small' }
          )}
        >
          {time}
        </div>
      </div>
    </div>
  );
};

export default JobDisplayCard;