"use client"

import { ChipLink } from "@scandic-hotels/design-system/ChipLink"
import { Chips } from "@scandic-hotels/design-system/Chips"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

interface LinkChipsProps {
  chips: {
    url: string
    title: string
  }[]
}

export default 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>
  )
}