import Image from "@/components/Image"
import Link from "next/link"
import Title from "@/components/MyPages/Title"

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

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

export default function Shortcuts({ shortcuts }: ShortcutsProps) {
  return (
    <section className={styles.shortcuts}>
      <header className={styles.header}>
        <Title level="h2" uppercase>
          Handy Shortcuts
        </Title>
        <p className={styles.subtitle}>The community at your fingertips</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="/chevron.svg"
              width={20}
            />
          </Link>
        ))}
      </section>
    </section>
  )
}
