import Image from "@/components/Image"
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({
  shortcuts,
  subtitle,
  title,
}: ShortcutsProps) {
  return (
    <section className={styles.shortcuts}>
      <Header link={undefined} subtitle={subtitle} title={title} />
      <section className={styles.links}>
        {shortcuts.map((shortcut) => (
          <Link
            className={styles.link}
            href={shortcut.url}
            key={shortcut.title}
            target={shortcut.openInNewTab ? "_blank" : undefined}
          >
            <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
            <Image
              alt="Chevron Icon"
              height={20}
              src="/_static/icons/chevron.svg"
              width={20}
            />
          </Link>
        ))}
      </section>
    </section>
  )
}