import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"

import styles from "./shortcutList.module.css"

import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"

export default function ShortcutList({ shortCutList }: ShortcutsListProps) {
  return (
    <>
      {shortCutList.map((shortcut) => (
        <Link
          href={shortcut.url}
          key={shortcut.title}
          target={shortcut.openInNewTab ? "_blank" : undefined}
          variant="shortcut"
          className={styles.link}
        >
          <Body textTransform="bold" color="burgundy">
            <span>{shortcut.text || shortcut.title}</span>
          </Body>
          <ArrowRightIcon color="burgundy" width={24} height={24} />
        </Link>
      ))}
    </>
  )
}
