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-1 flex flex-col justify-between sm:col-span-3">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        {FOOTER_MENU.map(({ group, items }, index) => (
          <div
            key={index}
            className="flex w-full flex-col gap-3"
          >
            <h3 className="text-xl font-semibold sm:text-2xl">{group}</h3>
            <div
              className={`${group === 'Follow Us' ? 'flex-col-2 flex w-full flex-wrap' : ''}`}
            >
              {items.map(({ url, icon: Icon, title }, subIndex) => (
                <Link
                  key={subIndex}
                  to={url}
                  className="flex w-1/2 items-center gap-3 py-1 sm:w-full"
                >
                  {Icon && (
                    <Icon
                      color="white"
                      width={24}
                      height={24}
                    />
                  )}
                  {title}
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="mt-8 justify-between border-t border-white pt-8 text-center text-xs sm:flex sm:text-sm">
        <div className="flex gap-6">
          {COPYRIGHT_MENU.map(({ url, title }, index) => (
            <Link
              key={index}
              to={url}
              className={`w-full text-white underline`}
            >
              {title}
            </Link>
          ))}
        </div>
        <div className="mt-2 sm:order-first">
          {new Date().getFullYear()} {APP.title}. All rights reserved.
        </div>
      </div>
    </div>
  )
}