website-new/frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

import React, { useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import TriangleButton from '../shared/TriangleButton';
import { useNavigate } from 'react-router-dom';
import net from './../../assets/icons/net.svg';
import { m } from 'framer-motion';
import useClickOutside from '../../hooks/useClickOutside';
import { UIContext } from '../../context';

const _data = {
  requirements: [
    'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
    'Good knowledge of software design patterns',
    'Good knowledge of databases and database design',
    'Experience in working with microservices is a big plus',
    'The ability to work in a big team but also to work independently',
    'Excellent communication skills',
  ],
  key: [
    'Working as a full-stack developer on various project and products',
    'Working with 3rd-party APIs',
    'Working on different integration scenarios',
    'Setting up project structure and architecture',
    'Being involved in full project development, from writing a specification to deploying a finished product',
  ],
  offer: [
    'Full Remote position',
    'A fast-growth company with stable projects and strong international clients',
    'Opportunity to work in teams with experienced engineers',
    'Competitive employment conditions',
    'An environment that will make you feel good about your job',
    'Challenging and diverse projects',
    'Support in your personal and professional growth',
    'Flexible working hours',
    'Private health insurance',
  ],
};

const _card = {
  role: '.Net Developer',
  shortDetails:
    'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
};

const ExpandedCard = ({ card, setExpanded, setExpandedCard }) => {
  const linkTo = useNavigate();

  const {uiContext, setUiContext} = useContext(UIContext);

  useEffect(() => {
    console.log(card);
  }, [])

  function handleContext(id) {
    setUiContext({
      ...uiContext,
      tab: id,
    });
  }
  

  return (
    <div
      className={
        'dark:text-white card-no-hover w-full h-fit shadow-md rounded-md px-12 lg:px-32 py-12 lg:py-16'
      }
    >
      {card.templateFlag === 1 && (
        <div className="flex flex-col items-start justify-center text-left">
          <div className="flex flex-row items-center justify-start">
            <div className="mr-4 lg:hidden">
              <TriangleButton
                onClick={() => {
                  setExpanded(false);
                  setExpandedCard({});
                }}
                direction={'left'}
              />
            </div>
            <div className="hidden lg:block absolute top-20 left-12">
              <TriangleButton
                onClick={() => {
                  setExpanded(false);
                  setExpandedCard({});
                }}
                direction={'left'}
              />
            </div>

            <img
              src={net}
              className="ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray"
            />
            <h3 className="ml-6 w-full font-semibold text-2xl">{card.role}</h3>
          </div>
          <p className="mt-6 text-sm">{card.extended.shortDetails}</p>
          <h4 className="mt-6 font-semibold text-lg">Key Responsibilities:</h4>
          <ul>
            {_data.key.map((item, index) => (
              <li className="list-disc ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <h4 className="mt-6 font-semibold text-lg">Requirements:</h4>
          <ul>
            {_data.requirements.map((item, index) => (
              <li className="list-disc ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <h4 className="mt-6 font-semibold text-lg">What We Offer:</h4>
          <ul>
            {_data.offer.map((item, index) => (
              <li className="list-disc ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <div className="flex flex-row w-full items-center justify-end">
            <a
              href="/contact"
              className="btn btn_primary mt-8 transition-all hover:transition-all"
              onClick={()=> handleContext(card.id)}
            >
              Apply
            </a>
          </div>
        </div>
      )}
       {card.templateFlag === 2 && (
        <div className="flex flex-col items-start justify-center text-left">
          <div className="flex flex-row items-center justify-start">
            <div className="mr-4 lg:hidden">
              <TriangleButton
                onClick={() => {
                  setExpanded(false);
                  setExpandedCard({});
                }}
                direction={'left'}
              />
            </div>
            <div className="hidden lg:block absolute top-20 left-12">
              <TriangleButton
                onClick={() => {
                  setExpanded(false);
                  setExpandedCard({});
                }}
                direction={'left'}
              />
            </div>

            <img
              src={net}
              className="ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray"
            />
            <h3 className="ml-6 w-full font-semibold text-2xl">{card.role}</h3>
          </div>
          <p className="mt-6 text-sm">{card.extended.paragraph}</p>
          <h4 className="mt-6 font-semibold text-lg">What We Offer:</h4>
          <ul>
            {card.extended.offer.map((item, index) => (
              <li className="list-disc ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <h4 className="mt-6 font-semibold text-lg">Requirements:</h4>
          <ul>
            {card.extended.requirements.map((item, index) => (
              <li className="list-disc ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <h4 className="mt-6 font-semibold text-lg">Our selection process has the following steps:</h4>
          <ul>
            {card.extended.selectionProcess.map((item, index) => (
              <li className="list-decimal ml-6" key={index}>
                {item}
              </li>
            ))}
          </ul>
          <br />
          <p className="mt-6 text-sm">{card.extended.conslusionParagraph}</p>
          <br/>
          <div className="flex flex-row w-full items-center justify-end">
            <a
              href="/contact"
              className="btn btn_primary mt-8 transition-all hover:transition-all"
              onClick={()=> handleContext(card.id)}
            >
              Apply
            </a>
          </div>
        </div>
      )}
    </div>
  );
};

ExpandedCard.propTypes = {};

export default ExpandedCard;