import { Events } from '../../../index';
import Complements from '../../complements/index';

export default function Footer({
  children,
  companyName,
  address,
  legal,
}: Footer.Footer1) {
  const date: Date = new Date();
  const year: number = date.getFullYear();

  return (
    <footer id='footerContainer' className='darkMode1'>
      <div className='m-auto text-sm py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 darkContainer text'>
        {children}
      </div>
      <div id='footerLegalContainer' className='darkMode1 text'>
        <div className='grid grid-cols-1 md:grid-cols-5'>
          <div></div>
          <div className='block md:flex md:justify-center md:items-center md:gap-4 col-span-3'>
            {legal.map((item) => (
              <a
                key={`key-footer-legal-${Events.Utils.slugify(item.name)}`}
                className='footerHover mx-auto text-center'
                href={item.href}
                aria-label={item.ariaLabel}
                target={item.target || '_blank'}
                rel={item.rel || 'tag'}>
                {item.name}
              </a>
            ))}
          </div>
          <div></div>
        </div>
        <div className='pt-5 px-2'>
          <Complements.Child item={address} name='footer-address' />
        </div>
        <p className='pt-2 px-2'>
          {`Copyright ©️ ${year} ${companyName} Todos los derechos reservados.`}
        </p>
        <p className='text-center md:text-right mx-5 mt-2'>
          Desarrollado por{' '}
          <a
            href='https://thejabb.com'
            rel='external'
            target='_blank'
            aria-label='Visitar el sitio de la Agencia Jabb'
            className='text-white font-semibold'>
            Agencia Jabb
          </a>
        </p>
      </div>
    </footer>
  );
}