import React from 'react';
import styled from 'styled-components';
import { FaPhoneAlt, FaEnvelope} from 'react-icons/fa';
import { FaLocationDot } from "react-icons/fa6";


const CompanyInfoContainer = styled.div`
  display: flex;
  flex-direction: column;

  align-self: center;
  justify-self: center;

  align-items: center;
  justify-contents: center;
  gap: 2rem;
  padding: 2rem;
  background-color: #1a202c; /* Dark background for contrast */
  margin-right: 1 rem; /* Add spacing to the right */
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

  @media (min-width: 768px) {
    margin-right: 1.5rem;
  }
`


const CompanyInfoItem = styled.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const IconWrapper = styled.div`
  font-size: 3rem; /* Adjust icon size */
  margin-bottom: 0.5rem;

  svg {
    width: 100%; /* Scale the SVG to fit the wrapper */
    height: 100%; /* Maintain aspect ratio */
    fill: #3f7ad3; /* Reference the gradient */
  }
`;

const InfoText = styled.p`
  font-size: 1rem;
  color: white;
  line-height: 1.5;
  a {
    color: white;
    text-decoration: none;
  }
`;


const CompanyInfo = () => (
  <CompanyInfoContainer data-testid="company-info-container">
    <CompanyInfoItem>
      <IconWrapper data-testid="location-icon">
        <FaLocationDot />
      </IconWrapper>
      <InfoText>
        E-502, Fourth Floor, E Block, PSG STEP, <br />
        PSG College of Technology, Peelamedu, <br />
        Coimbatore, Tamil Nadu 641004.
      </InfoText>
    </CompanyInfoItem>
    <CompanyInfoItem>
      <IconWrapper data-testid="phone-icon">
        <FaPhoneAlt />
      </IconWrapper>
      <InfoText>
        <a href="tel:+91 94498 33282">+91 94498 33282</a>
      </InfoText>
    </CompanyInfoItem>
    <CompanyInfoItem>
      <IconWrapper data-testid="email-icon">
        <FaEnvelope />
      </IconWrapper>
      <InfoText>
        <a href="mailto:contact@genomatics.in">contact@genomatics.in</a>
      </InfoText>
    </CompanyInfoItem>
  </CompanyInfoContainer>
);


export default CompanyInfo;