import { type PropsWithChildren } from 'react'

import { InnerContainer, OuterContainer } from './Container'
import HybridLink, { type Props as HybridLinkProps } from './HybridLink'

function NavLink({
  href,
  children,
}: PropsWithChildren<{ href: HybridLinkProps['href'] }>) {
  return (
    <HybridLink
      href={href}
      className="transition hover:text-teal-500 dark:hover:text-teal-400"
    >
      {children}
    </HybridLink>
  )
}

export default function Footer() {
  return (
    <footer className="mt-32">
      <OuterContainer>
        <div className="border-t border-zinc-100 pt-10 pb-16 dark:border-zinc-700/40">
          <InnerContainer>
            <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
              <div className="flex gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                <NavLink href="/sobre-mim">Sobre mim</NavLink>
                <NavLink href="/projetos">Projetos</NavLink>
              </div>
              <p className="text-sm text-zinc-400 dark:text-zinc-500">
                &copy; {new Date().getFullYear()} Filipe Medeiros. Shamelessly
                built with{' '}
                <HybridLink href="https://tailwindui.com" className="underline">
                  TailwindUI
                </HybridLink>
                .
              </p>
            </div>
          </InnerContainer>
        </div>
      </OuterContainer>
    </footer>
  )
}