import { wrapBasename } from "@/modules/basename"

export const Footer = () => {

  const links = [
    {
      href: wrapBasename('/'),
      label: '主页',
    },
    {
      href: wrapBasename('/docs'),
      label: '文档',
    },
  ]

  return (
    <footer className="fixed bottom-0 w-full bg-white border-t border-gray-200 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        {/* 链接区域 */}
        <nav className="flex flex-wrap justify-center items-center gap-2 sm:gap-4 mb-3">
          {links.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="relative px-4 py-2 text-sm sm:text-base font-medium text-gray-600 hover:text-blue-600 transition-all duration-300 ease-in-out
                         before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 before:transition-all before:duration-300
                         hover:before:w-full active:scale-95"
            >
              {link.label}
            </a>
          ))}
        </nav>

        {/* 版权信息 */}
        <div className="text-center text-xs sm:text-sm text-gray-500">
          &copy; 2025 Daily Question
        </div>
      </div>
    </footer>
  )
}