import propTypes from 'prop-types';
import ServiceCard from './ServiceCard';

export default function Service(props) {
  const serviceCard = props.fetch;

  return (
    <section
      id={props.heading.split(' ')[0]}
      className="flex flex-col items-center justify-center py-8"
    >
      <div className="bg-baby-blue dark:bg-dg-primary-1600 py-8 w-full" key={props.key}>
        <h2 className="text-4xl text-dg-secondary uppercase font-medium text-center px-4 md:text-left max-w-custom m-auto">
          {props.heading}
        </h2>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-1 lg:grid-rows-2 lg:gap-8 w-full max-w-custom">
        {serviceCard.section.map(section => (
          <ServiceCard
            key={section.id}
            heading={section.heading}
            paragraph={section.paragraph}
            icon={section.icon.data.attributes.url}
          />
        ))}
      </div>
    </section>
  );
}

Service.propTypes = {
  heading: propTypes.string,
  key: propTypes.number,
  fetch: propTypes.string,
};
