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

import Header from "../Header"

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

import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"

export default function Shortcuts({
  firstItem = false,
  shortcuts,
  subtitle,
  title,
}: ShortcutsProps) {
  return (
    <section className={styles.shortcuts}>
      <Header
        link={undefined}
        subtitle={subtitle}
        title={title}
        topTitle={firstItem}
      />
      <section className={styles.links}>
        {shortcuts.map((shortcut) => (
          <Link
            href={shortcut.url}
            key={shortcut.title}
            target={shortcut.openInNewTab ? "_blank" : undefined}
            variant="shortcut"
          >
            <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
            <ArrowRightIcon />
          </Link>
        ))}
      </section>
    </section>
  )
}