import React from 'react';
import Link from '../../molecules/Link/index';
import { cssMerge } from '../../utils/cssMerge';
import type { menu } from './footer.types'
import type { FC } from 'react'
import { eyebrow } from './footer.styles';

export const FooterMenu: FC<menu> = (menu) => (
  <div className='tw-flex tw-flex-col tw-gap-4 tw-basis-1/2 sm:tw-basis-auto'>
    <span className={cssMerge(eyebrow({ variant: 'menuItemHeading' }))}>{menu.menuItemHeading}</span>
    {menu && menu.menuItems && menu.menuItems.map((menuItem, index) => (
      <React.Fragment key={index}>
        {menuItem.label &&
          <Link key={`${menuItem.label}-${index}`} href={menuItem.url || ''} className='tw-text-gray-400 hover:tw-text-common-white focus:tw-text-common-white tw-transition-colors'>
            {menuItem.label}
          </Link>}
      </React.Fragment>
    ))}
  </div>
)
