import React from 'react';
import { useNavigate } from 'react-router-dom';
import Wrapper from '../layout/Wrapper';
import PageTitle from './shared/PageTitle';
import ProcessCard from './shared/ProcessCard';
import ProcessCardsWrapper from './shared/ProcessCardWrapper';

const _data = {
  cards: [
    {
      id: 0,
      title: 'BI Healthcare Solution System',
      imgUrl:
        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
      alt: 'BI Healthcare Solution System',
      link: '/casestudybi',
    },
    {
      id: 1,
      title: 'Resource Planning System',
      imgUrl:
        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
      alt: 'Resource Planning System',
      link: '/casestudyresource',
    },
    {
      id: 2,
      title: 'Ticketing System for Passengers',
      imgUrl:
        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
      alt: 'Ticketing System for Passengers',
      link: '/casestudyticketing',
    },
  ],
};

function PortfolioSection({heading,cta}) {
  const linkTo = useNavigate();

  return (
    <Wrapper padding={' py-90p'} bg>
      <div className="py-32p">
        <PageTitle left heading={heading.title} subheading={heading.subtitle} />
      </div>

      <div className="flex flex-col lg:flex-row justify-center items-center lg:justify-between gap-8">
        {_data.cards.map((item, index) => (
          <a
            className={'card max-w-780p box my-2 flex flex-col items-center'}
            href={item.link}
            key={index}
          >
            <img src={item.imgUrl} alt={item.alt} className={'mb-12'}></img>
            <h3 className="h3-heading">{item.title}</h3>
            <button className="btn text-dg-secondary mt-4">{cta}</button>
          </a>
        ))}
      </div>
      <div className="flex justify-center text-center">
        <button
          className="btn text-dg-secondary mt-4"
          onClick={() => linkTo('/portfolio')}
        >
          See More...
        </button>
      </div>
    </Wrapper>
  );
}

export default PortfolioSection;