import { Typography } from '../../Typography'
import { type FooterItem } from '../config'
import { Item } from './Item'

type Props = {
  label: string
  items: FooterItem[]
}
export function Category({ label, items }: Props) {
  return (
    <nav data-category={label}>
      <Typography
        variant="body-semi"
        color="platform-navigation"
        className="mb-4"
      >
        {label}
      </Typography>
      <ul className="flex flex-col gap-3">
        {items.map((item) => (
          <Item key={item.label} item={item} />
        ))}
      </ul>
    </nav>
  )
}