import propTypes from 'prop-types';

import { useEffect, useState } from 'react';
import { ReactComponent as BackTriangle } from '../assets/graphics/BackTriangle.svg';
import Wrapper from '../layout/Wrapper';
import ExpandedCard from './ExpandedCard';
import TriangleButton from './shared/TriangleButton';
import CareerCard from './CareerCard';
import Grid from '../layout/Grid';
import { ref } from 'yup';
import useClickOutside from '../hooks/useClickOutside';
import useComponentVisible from '../hooks/useClickOutside';

const api_url = process.env.REACT_APP_API_URL;



export default function CardCareers2({ cards }) {
  const [expandedCard, setExpandedCard] = useState({});

  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);



  return (

    <Wrapper>
      <div ref={ref}>
        {isComponentVisible ?
         <ExpandedCard card={expandedCard} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard}></ExpandedCard>
         :
        <div className='flex flex-row justify-center w-full'>
          {
            cards.map((item, index) => (
              <CareerCard card={item} key={index} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />
            ))
          }

        </div>
}
      </div>
       
    </Wrapper>
  );
}

CardCareers2.propTypes = {
};
