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

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

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

export default function ShortcutsListItems({
  shortcutsListItems,
  className,
}: ShortcutsListItemsProps) {
  return (
    <ul className={className}>
      {shortcutsListItems.map((shortcut) => (
        <li key={shortcut.title} className={styles.listItem}>
          <Link
            href={shortcut.url}
            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>
        </li>
      ))}
    </ul>
  )
}
