import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebook,
  faInstagram,
  faLinkedin
} from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";

const SocialIcons = () => (
  <Container>
    <Row className="justify-content-center"z>
      <Col xs={12} md={12} lg={12} className="text-center">
        <Container  style={{backgroundColor: "black", padding: "20px", marginTop:"20px" }}>
        <a href="#" style={{ marginRight: "20px" }}>
          <FontAwesomeIcon icon={faFacebook} size="2x" style={{ color: "white" }} />
        </a>

        <a href="#" style={{ marginRight: "20px" }}>
          <FontAwesomeIcon icon={faInstagram} size="2x" style={{ color: "white" }} />
        </a>
        <a href="mailto:email@example.com">
          <FontAwesomeIcon icon={faEnvelope} size="2x" style={{ color: "white" }} />
        </a>
        </Container>
      </Col>
    </Row>
  </Container>
);

export default SocialIcons;