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';
import { ref } from 'yup';



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

  const handleNavigate = (tab, position) => {
    linkTo('/contact', { tab: { tab }, position: { position } });
  };

  console.log(card);

  return (
    <div
      ref={forwarderdRef}
      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 md:top-[15rem] 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>
            {card &&
              card.extended.key &&
              card.extended.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>
            {card &&
              card.extended.requirements &&
              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">What We Offer:</h4>
          <ul>
            {
              card.extended.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={handleNavigate(false, card.nugget)}
            >
              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={handleNavigate(false, '.Net')}
            >
              Apply
            </a>
          </div>
        </div>
      )}
    </div>
  );
};

ExpandedCard.propTypes = {};

export default ExpandedCard;