import propTypes from 'prop-types';

export default function ServiceCard(props) {
  const api_url = process.env.REACT_APP_API_URL;

  return (
    <div className="flex flex-col md:flex-row items-center md:items-center justify-center py-16" key={props.key}>
      <div className="flex flex-col items-center justify-center">
        <img src={api_url + props.icon} alt="Icon" className="w-24 md:w-64" />
      </div>
      <div className="mt-2 md:mt-0 flex flex-col items-center md:items-start text-center md:text-left">
        <h3 className="ml-0 md:ml-3 text-lg font-semibold dark:text-white">{props.heading}</h3>
        <p className="ml-0 md:ml-3 text-sm dark:text-white">{props.paragraph}</p>
      </div>
    </div>
  );
}

ServiceCard.propTypes = {
  heading: propTypes.string,
  paragraph: propTypes.string,
  icon: propTypes.string,
  key: propTypes.number,
};
