CardSection.tsx

import clsx from 'clsx'
import { CSSProperties, JSX, useState, useEffect } from 'react'
import { useColorMode } from '@docusaurus/theme-common'
import Card, { CardItem } from '@site/src/components/Card'

import styles from './CardSection.module.scss'

type CardSectionProps = {
  title?: string
  description?: string
  cards: CardItem[]
  colorPalette?: string
}

export default function CardSection({
  title,
  description,
  cards,
  colorPalette,
}: CardSectionProps): JSX.Element {
  const { colorMode } = useColorMode()
  const [theme, setTheme] = useState('')

  useEffect(() => {
    setTheme(colorMode)
  }, [colorMode])

  return (
    <section className={styles.wrapper}>
      <div className="container">
        <div className={styles['grid-wrapper']}>
          {/* header placed inside the grid-wrapper for column alignment */}
          {(title || description) && (
            <div className={styles['grid-col-center']}>
              <div className={styles.header}>
                {title && <h2>{title}</h2>}
                {description && <p>{description}</p>}
              </div>
            </div>
          )}

          <div className={styles['grid-col-center']}>
            <ul
              className={styles.grid}
              style={
                colorPalette
                  ? ({
                      '--color-palette': `var(--developer-${colorPalette})`,
                    } as CSSProperties)
                  : {}
              }
            >
              {cards.map(({ title, description, href }, index) => (
                <Card
                  key={index}
                  title={title}
                  description={description}
                  href={href}
                  theme={theme}
                />
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}