import propTypes from 'prop-types';

import { useState } from 'react';
import { ReactComponent as BackTriangle } from '../assets/graphics/BackTriangle.svg';
import TriangleButton from './shared/TriangleButton';

const api_url = process.env.REACT_APP_API_URL;



export default function CardCareers(props) {
  const [hideJob, setHideJob] = useState(true);

  return (

    <div
      className={'transition-all hover:transition-all pb-0 hover:pb-12 flex flex-col justify-center items-center w-4/5 lg:w-5/6 mb-8 lg:mb-0 lg:mr-8 group'
      }
    >
      {/* Collapsed Card */}
      { hideJob && <div>
      <img
        src={api_url + props.image}
        className={
            'ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4'
        }
      />
      <h3 className={'mt-6 font-semibold text-2xl'}>
        {props.heading}
      </h3>
      <p className={'mt-6 text-sm'}>{props.paragraph}</p>
      <a
        href={'#' + props.heading.split(' ')[0]}
        onClick={() => setHideJob(!hideJob)}
        className={'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
        }
      >
        Read More
      </a>
      </div>}
     
      

      {/* Expanded Job */}
      { !hideJob &&       <div
        id={props.heading.split(' ')[0]}
        className={
          !hideJob
            ? 'hidden'
            : 'dark:text-white w-full h-fit shadow-md rounded-md px-12 lg:px-16 py-12 lg:py-16'
        }
      >
        <div className="flex flex-col items-start justify-center text-left">
          <div className="flex flex-row items-center justify-start">
            <div className='mr-4'>
              <TriangleButton onClick={() => setHideJob(!hideJob)} direction={'left'}/>
            </div>
           

            <img
              src={api_url + props.image}
              className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4"
            />
            <h3 className="ml-6 w-full font-semibold text-2xl">{props.heading}</h3>
          </div>
          <p className="mt-6 text-sm">{props.paragraph}</p>
          <h4 className="mt-6 font-semibold text-lg">{props.requirements_heading}</h4>
          <p className="mt-6 text-sm">{props.requirements_paragraph}</p>
          <br />
          <h4 className="mt-6 font-semibold text-lg">{props.expectations_heading}</h4>
          <p className="mt-6 text-sm">{props.expectations_paragraph}</p>
          <h4 className="mt-6 font-semibold text-lg">{props.benefits_heading}</h4>
          <p className="mt-6 text-sm">{props.benefits_paragraph}</p>
          <div className="flex flex-row w-full items-center justify-end">
            <a
              href="#contact"
              onClick={() => {
                setHideJob(!hideJob);
                props.setClickedPosition('#' + props.hash_position);
              }}
              className="btn btn_primary mt-8 transition-all hover:transition-all"
            >
              Apply
            </a>
          </div>
        </div>
      </div>}

    </div>
  );
}

CardCareers.propTypes = {
  key: propTypes.number,
  image: propTypes.string,
  heading: propTypes.string,
  paragraph: propTypes.string,
  requirements_heading: propTypes.string,
  requirements_paragraph: propTypes.string,
  expectations_heading: propTypes.string,
  expectations_paragraph: propTypes.string,
  benefits_heading: propTypes.string,
  benefits_paragraph: propTypes.string,
  hash_position: propTypes.string,
  setClickedPosition: propTypes.func,
};
