import React from "react";
import PropTypes from "prop-types";
import styles from "./modules/Infos.module.css";
import LocationIcon from "../public/icons/location.svg";
import GithubIcon from "../public/icons/github.svg";
import LinkedinIcon from "../public/icons/linkedin.svg";
import MailIcon from "../public/icons/mail.svg";

export default function Infos(props) {
  const infos = props.infos;
  return (
    <div className={styles.container}>
      <b className={styles.bracket}>{"{"}</b>
      <a
        className={`${styles.row} ${styles.location}`}
        href={infos.location.link}
        target="__blank"
      >
        <LocationIcon className={styles.icon} />
        <b>{infos.location.value}</b>
      </a>
      <a
        className={`${styles.row} ${styles.github}`}
        href={infos.github.link}
        target="__blank"
      >
        <GithubIcon className={styles.icon} />
        <b>{infos.github.value}</b>
      </a>
      <a
        className={`${styles.row} ${styles.linkedin}`}
        href={infos.linkedin.link}
        target="__blank"
      >
        <LinkedinIcon className={styles.icon} />
        <b>{infos.linkedin.value}</b>
      </a>
      <a
        className={`${styles.row} ${styles.email}`}
        href={infos.email.link}
        target="__blank"
        type="email"
      >
        <MailIcon className={styles.icon} />
        <b>{infos.email.value}</b>
      </a>
      <b className={styles.bracket}>{"}"}</b>
    </div>
  );
}

Infos.propTypes = {
  infos: PropTypes.PropTypes.object.isRequired,
};