import { ArrowRightIcon } from "@/components/Icons"
import SectionContainer from "@/components/Section/Container"
import Header from "@/components/Section/Header"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"

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 (
    <SectionContainer>
      <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"
          >
            <Body textTransform="bold" color="burgundy">
              <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
            </Body>
            <ArrowRightIcon color="burgundy" className={styles.arrowRight} />
          </Link>
        ))}
      </section>
    </SectionContainer>
  )
}
