import { Link } from 'react-router'

import { APP } from '~/data/meta'

import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'

export const FooterLinks = () => {
  return (
    <div className="col-span-3 flex flex-col justify-between">
      <div className="grid grid-cols-3 gap-4">
        {FOOTER_MENU.map(({ group, items }, index) => (
          <div
            key={index}
            className="flex flex-col gap-3"
          >
            <h3 className="text-2xl font-semibold">{group}</h3>
            <div>
              {items.map(({ url, icon: Icon, title }, subIndex) => (
                <Link
                  key={subIndex}
                  to={url}
                  className="flex items-center gap-3 py-2"
                >
                  {Icon && (
                    <Icon
                      fill="white"
                      width={24}
                      height={24}
                    />
                  )}
                  {title}
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="flex justify-between border-t border-white pt-8 text-sm">
        <div>
          {new Date().getFullYear()} {APP.title}. All rights reserved.
        </div>
        <div className="flex gap-6">
          {COPYRIGHT_MENU.map(({ url, title }, index) => (
            <Link
              key={index}
              to={url}
              className="text-white underline"
            >
              {title}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}