"use client"

import { ChipLink } from "../ChipLink"
import { Chips } from "../Chips"
import { MaterialIcon } from "../Icons/MaterialIcon"
import type { LinkChipsProps } from "./types"

export function LinkChips({ chips }: LinkChipsProps) {
  if (!chips.length) {
    return null
  }

  return (
    <Chips>
      {chips.map(({ title, url }) => (
        <ChipLink key={`${title}-${url}`} href={url}>
          {title}
          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
        </ChipLink>
      ))}
    </Chips>
  )
}