import React from "react";

import PropTypes from "prop-types";

import "./logos1.css";

const Logos1 = (props) => {
  return (
    <div className="logos1-container thq-section-padding">
      <div className="logos1-max-width thq-section-max-width">
        <h2 className="logos1-text thq-heading-2">{props.heading1}</h2>
        <div className="thq-grid-2">
          <img
            alt={props.logo1Alt}
            src={props.logo1Src}
            className="logos1-logo1 thq-img-ratio-16-9"
            onClick={() => window.open("https://www.weatherapi.com/", "_blank")}
          />
          <img
            alt={props.logo2Alt}
            src={props.logo2Src}
            className="logos1-logo2 thq-img-ratio-16-9"
            onClick={() => window.open("https://open-meteo.com/", "_blank")}
          />
        </div>
      </div>
    </div>
  );
};

Logos1.defaultProps = {
  heading1:
    "Highlighted weather data sourced from leading APIs providing comprehensive meteorological insight.",
  logo1Src: "https://cdn.weatherapi.com/v4/images/weatherapi_logo.png",
  logo1Alt: "Logo1",
  logo2Src:
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAJ1BMVEVHcEz/iAD/iAD/jADoegR8OA4gABJEDxC4XQqbSwxjJw8tABHPawfzL3XvAAAAAnRSTlMApz4h+3MAAACTSURBVHgBY2BUQgICDELIXEUGJRRAXa6xspGSMpAAIiDXJCy9WclydfaS9uwgINd7Z1emkVVl5+6drbuMGJRXOxuHOVkVG3c3A2kGlVQjJbfJVsVAQrntEINNhpGSdjCQqwbm6qBwoYphXKhRcK6Sd0VrphGCa7IM6AzTxUrqk5WOA7nKRkDHQZES7UIDLdjRIgUAOuhTEb+UHIIAAAAASUVORK5CYII=",
  logo2Alt: "Logo2",
};
Logos1.propTypes = {
  heading1: PropTypes.string,
  logo1Src: PropTypes.string,
  logo1Alt: PropTypes.string,
  logo2Src: PropTypes.string,
  logo2Alt: PropTypes.string,
};

export default Logos1;