import { cn } from '../../../utils'
import { typographyVariants } from '../../Typography'
import { type FooterItem } from '../config'

type Props = {
  item: FooterItem
}
export function Item({ item }: Props) {
  return (
    <li className={cn('footer-expanded-item group block')}>
      <a
        href={item.url}
        className={cn(
          typographyVariants({ color: 'platform-navigation-muted' }),
          'flex flex-row items-center gap-2 leading-4 hover:text-platform-navigation-hover-foreground',
        )}
      >
        {item.Icon && <item.Icon width="24px" height="24px" />}
        {item.label}
      </a>
    </li>
  )
}