import React from 'react'

import PropTypes from 'prop-types'

import './hero3.css'

const Hero3 = (props) => {
  return (
    <div className="hero3-header9">
      <img
        alt={props.placeholderImageAlt}
        src={props.placeholderImageSrc}
        className="thq-img-ratio-16-9"
      />
      <div className="hero3-content thq-section-padding">
        <div className="hero3-max-width thq-section-max-width thq-flex-row">
          <div className="hero3-column">
            <h1 className="thq-heading-1 hero3-text">{props.heading1}</h1>
          </div>
          <div className="hero3-column1">
            <p className="thq-body-large hero3-text1">{props.content1}</p>
            <div className="hero3-actions">
              <button className="thq-button-filled hero3-button">
                <span className="thq-body-small">{props.action1}</span>
              </button>
              <button className="thq-button-outline hero3-button1">
                <span className="thq-body-small">{props.action2}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Hero3.defaultProps = {
  image1Alt: 'Weather App Hero Image',
  content1: 'Get real-time weather updates for any city or location worldwide',
  action2: 'Get Started',
  heading1: 'Plan Your Day with Accurate Weather Forecasts',
  action1: 'Learn More',
  image1Src:
    'https://images.unsplash.com/photo-1569742152946-b802f045df68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
  placeholderImageSrc:
    'https://images.unsplash.com/photo-1500674425229-f692875b0ab7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMjgxOXw&ixlib=rb-4.0.3&q=80&w=1080',
  placeholderImageAlt: 'Weather app hero image',
}

Hero3.propTypes = {
  image1Alt: PropTypes.string,
  content1: PropTypes.string,
  action2: PropTypes.string,
  heading1: PropTypes.string,
  action1: PropTypes.string,
  image1Src: PropTypes.string,
  placeholderImageSrc: PropTypes.string,
  placeholderImageAlt: PropTypes.string,
}

export default Hero3