import React from "react";

const contributors = [
    { name: "Harshitha Shetty", github: "https://github.com/HarshithaShetty27" },
    { name: "Harikrishnan Gopal", github: "https://github.com/hk151109" },
    { name: "Suhrud Korgaokar", github: "https://github.com/amNobodyyy" },
    { name: "Hasya Aburi", github: "https://github.com/ayoitshasya" }
];

const footerStyle = {
    backgroundColor: "#800000", // Maroon
    color: "white",
    textAlign: "center",
    padding: "16px",
    width: "100%",
    position: "relative",
    bottom: "0",
    boxShadow: "0px -2px 10px rgba(0, 0, 0, 0.2)"
};

const linkStyle = {
    color: "white",
    textDecoration: "none",
    fontWeight: "bold",
    margin: "0 10px",
    transition: "color 0.3s"
};

const linkHoverStyle = {
    color: "#ffcccb" // Light pinkish hover effect
};

const Footer = () => {
    return (
        <footer style={footerStyle}>
            <p style={{ fontSize: "18px", fontWeight: "bold" }}>Made by:</p>
            <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: "10px", marginTop: "5px" }}>
                {contributors.map((contributor, index) => (
                    <a
                        key={index}
                        href={contributor.github}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={linkStyle}
                        onMouseOver={(e) => e.target.style.color = linkHoverStyle.color}
                        onMouseOut={(e) => e.target.style.color = linkStyle.color}
                    >
                        {contributor.name}
                    </a>
                ))}
            </div>
        </footer>
    );
};

export default Footer;