import PropTypes from "prop-types";
import React from "react";
import Avatar from "../components/Avatar";
import Infos from "../components/Infos";
import Presentation from "../components/Presentation";
import styles from "./modules/HomeSection.module.css";
import Section from "./Section";
import Button from "./Button";
import DownIcon from "../public/icons/arrow-down.svg";

export default function HomeSection(props) {
  const person = props.person;
  return (
    <Section>
      <div className={styles.bg} />

      <div className={styles.flexCenter}>
        <div className={styles.container}>
          <Presentation
            firstName={person.firstName}
            lastName={person.lastName}
            description={person.description}
          />
          <Avatar />

          <Infos infos={person.infos} />
        </div>

        <div className={styles.buttonContainer}>
          <Button
            label={"Case Studies"}
            onClick={() => props.scrollFunction()}
          />
          <DownIcon className={styles.icon} />
        </div>
      </div>
    </Section>
  );
}

HomeSection.propTypes = {
  person: PropTypes.object.isRequired,
};