import React from 'react'
import { cn } from '../../../utils'
import { typographyVariants } from '../../Typography'
import { type FooterConfig } from '../config'
import { FooterConfigContext } from '../context'

type Props = {
  category: keyof FooterConfig
}

export function MainFooterSection({
  category,
  children,
}: React.PropsWithChildren<Props>) {
  const { config } = React.useContext(FooterConfigContext)

  return (
    <div className="flex flex-initial flex-row gap-4">
      {config[category].map((item) =>
        item.url ? (
          <a
            key={item.label}
            className={cn(
              typographyVariants({ variant: 'body-s' }),
              'footer-main-item text-platform-navigation-foreground',
            )}
            href={item.url}
          >
            {item.label}
          </a>
        ) : (
          <span
            key={item.label}
            className={cn(
              typographyVariants({ variant: 'body-s' }),
              'footer-main-item text-platform-navigation-foreground',
            )}
          >
            {item.label}
          </span>
        ),
      )}
      {children}
    </div>
  )
}