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 && shortcuts.length > 1
      ? {
          section: styles.twoColumnSection,
          leftColumn: styles.leftColumn,
          rightColumn: styles.rightColumn,
        }
      : {
          section: styles.oneColumnSection,
          leftColumn:
            shortcuts.length === 1
              ? styles.leftColumnBorderBottomNone
              : styles.leftColumnBorderBottom,
        }

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