'use client'

import Link from 'next/link'
import { footerNavGroups, type FooterNavLink } from '@/data/footerNav'

const footerLinkClass =
  'text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors'

function FooterNavLinkItem({ link }: { link: FooterNavLink }) {
  if (link.external) {
    return (
      <li>
        <a className={footerLinkClass} href={link.href}>
          {link.label}
        </a>
      </li>
    )
  }

  return (
    <li>
      <Link className={footerLinkClass} href={link.href}>
        {link.label}
      </Link>
    </li>
  )
}

export default function FooterLinkGroups() {
  return (
    <div className="grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-4">
      {footerNavGroups.map((group) => (
        <div key={group.id}>
          <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
            {group.title}
          </div>
          <ul className="space-y-1 text-sm">
            {group.links.map((link) => (
              <FooterNavLinkItem key={`${group.id}-${link.href}`} link={link} />
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}
