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 leftColumn = shortcuts.slice(0, middleIndex)
  const rightColumn = shortcuts.slice(middleIndex)

  const classNames = hasTwoColumns
    ? {
        section: styles.twoColumnSection,
        leftColumn: styles.leftColumn,
        rightColumn: styles.rightColumn,
      }
    : {
        section: styles.oneColumnSection,
        leftColumn: styles.leftColumnBottomBorder,
        rightColumn: "",
      }

  return (
    <SectionContainer>
      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
      <section className={classNames.section}>
        <ShortcutsListItems
          shortcutsListItems={leftColumn}
          className={styles.leftColumn}
        />
        <ShortcutsListItems
          shortcutsListItems={rightColumn}
          className={styles.rightColumn}
        />
      </section>
    </SectionContainer>
  )
}
