import React from "react";
import { FaXTwitter, FaLinkedin } from "react-icons/fa6";
import styled from "styled-components";

// Styled Components
const Foot = styled.footer`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(42, 45, 49); /* Dark gray */
  color: white;
  padding: 1rem 0.4rem; /* Adjust the padding as needed */

  @media(max-width:442px){
  }

`;

const IconLink = styled.a`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white; /* Default icon color */
  font-size: 1.5rem;
  transition: all 0.3s ease;

  &:hover svg {
    fill: #3267B9; /* Apply gradient on hover */
  }
`;

const Footer = () => {
  return (
    <Foot className=".footer">
      <div className="flex justify-center items-center ">
        <p className="text-sm">&copy; {new Date().getFullYear()} Genomatics Pvt. Ltd. All Rights Reserved.</p>
        <div className="flex justify-center items-center space-x-6 ml-4">
          {/* Twitter Icon with Gradient Hover */}
          <IconLink
            aria-label="x"
            href="https://x.com/" // Replace with your actual Twitter link
            target="_blank"
            rel="noopener noreferrer"
            className="text-xl"
          >
            <FaXTwitter />
          </IconLink>

          {/* LinkedIn Icon with Gradient Hover */}
          <IconLink
            aria-label="linkedin"
            href="https://linkedin.com/company/genomatics" // Replace with your actual LinkedIn link
            target="_blank"
            rel="noopener noreferrer"
            className="text-xl"
          >
            <FaLinkedin />
          </IconLink>
        </div>
      </div>

      {/* Define the gradient used for the icons */}
      <svg width="0" height="0">
      </svg>
    </Foot>
  );
};

export default Footer;