import Link from "next/link"

import Image from "@/components/Image"
import Title from "@/components/MyPages/Title"

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

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

export default function Shortcuts({
  shortcuts,
  title,
  subtitle,
}: ShortcutsProps) {
  return (
    <section className={styles.shortcuts}>
      <header className={styles.header}>
        <Title level="h2" as="h5" uppercase>
          {title}
        </Title>
        <p className={styles.subtitle}>{subtitle}</p>
      </header>
      <section className={styles.links}>
        {shortcuts.map((shortcut) => (
          <Link
            className={styles.link}
            href={shortcut.href}
            key={shortcut.title}
          >
            <span>{shortcut.title}</span>
            <Image
              alt="Chevron Icon"
              height={20}
              src="/_static/icons/chevron.svg"
              width={20}
            />
          </Link>
        ))}
      </section>
    </section>
  )
}