import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"

import ShortcutsListItems from "./ShortcutsListItems"

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

import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"

export default function ShortcutsList({
  firstItem = false,
  shortcuts,
  subtitle,
  title,
  hasTwoColumns,
}: ShortcutsListProps) {
  const middleIndex = Math.ceil(shortcuts.length / 2)
  const columns =
    hasTwoColumns && shortcuts.length > 1
      ? [
          {
            id: "shortcuts-column-1",
            column: shortcuts.slice(0, middleIndex),
          },
          {
            id: "shortcuts-column-2",
            column: shortcuts.slice(middleIndex),
          },
        ]
      : [
          {
            id: "shortcuts-column",
            column: shortcuts,
          },
        ]

  return (
    <SectionContainer>
      <SectionHeader
        preamble={subtitle}
        title={title}
        headingAs={firstItem ? "h3" : "h4"}
        headingLevel={firstItem ? "h1" : "h2"}
      />
      <section className={styles.section}>
        {columns.map(({ id, column }) => (
          <ShortcutsListItems
            key={id}
            shortcutsListItems={column}
            className={styles.column}
          />
        ))}
      </section>
    </SectionContainer>
  )
}