'use client'

import React from 'react'
import { Link } from './Link'

export const Footer = () => {
  const currentYear = new Date().getFullYear()

  const footerLinks = {
    'About': [
      { label: 'Mission', href: '/about/mission' },
      { label: 'Team', href: '/about/team' },
      { label: 'Contact', href: '/about/contact' },
    ],
    'Community': [
      { label: 'Blog', href: '/blog' },
      { label: 'Forum', href: '/forum' },
      { label: 'Podcast', href: '/podcast' },
    ],
    'Resources': [
      { label: 'Knowledge Base', href: '/resources' },
      { label: 'Support', href: '/support' },
      { label: 'FAQ', href: '/faq' },
    ],
    'Legal': [
      { label: 'Privacy Policy', href: '/legal/privacy' },
      { label: 'Terms of Service', href: '/legal/terms' },
      { label: 'Code of Conduct', href: '/legal/conduct' },
    ],
  }

  return (
    <footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {Object.entries(footerLinks).map(([category, links]) => (
            <div key={category}>
              <h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
                {category}
              </h3>
              <ul className="space-y-2">
                {links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      variant="neutral"
                      className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white text-sm no-underline hover:underline"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
          <p className="text-center text-sm text-gray-600 dark:text-gray-400">
            &copy; {currentYear} MoreThanADiagnosis. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}