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

import Link from "@/components/TempDesignSystem/Link"

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

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

export default function ShortcutsListItems({
  shortcutsListItems,
  className,
}: ShortcutsListItemsProps) {
  return (
    <ul className={`${styles.list} ${className}`}>
      {shortcutsListItems.map((shortcut) => (
        <li
          key={`${shortcut.text}_${shortcut.url}`}
          className={styles.listItem}
        >
          <Link
            href={shortcut.url}
            target={shortcut.openInNewTab ? "_blank" : undefined}
            variant="shortcut"
            className={styles.link}
          >
            <Typography variant="Body/Paragraph/mdBold">
              <span>{shortcut.text || shortcut.title}</span>
            </Typography>
            <MaterialIcon color="CurrentColor" icon="arrow_forward" />
          </Link>
        </li>
      ))}
    </ul>
  )
}
