import React from "react"
import NavLink, { NavLinkProps } from "react-bootstrap/NavLink"
import "./Footer.scss"

interface FooterProps {
    children?: React.ReactNode
    copyright?: React.ReactNode
}

const Footer = ({ children, copyright }: FooterProps) => {
    return (
        <footer className="d-flex flex-column text-white footer pdh-footer-background">
            <div className="footer-container">
                <div className="container">
                    <div className="footer-columns d-flex flex-column flex-md-row justify-content-sm-between py-5">
                        {children}
                    </div>
                    <div className={"footer-spacer"} />
                    {copyright && (
                        <>
                            <div className="footer-divider" />
                            <div className="footer-copyright d-flex justify-content-center align-items-center text-center my-4">
                                {copyright}
                            </div>
                        </>
                    )}
                </div>
            </div>
        </footer>
    )
}

const Heading = ({ title, children }: { title: string; children?: React.ReactNode }) => {
    return (
        <div className={"mb-5 mb-md-0"}>
            {title && <h4>{title}</h4>}
            {children}
        </div>
    )
}

const Link = ({ href, className, children, ...props }: NavLinkProps) => {
    return (
        <NavLink className={`mb-2 ${className ?? ""}`} href={href} {...props}>
            {children}
        </NavLink>
    )
}

Footer.Heading = Heading
Footer.Link = Link

export default Footer
export { Footer, FooterProps }