"use client"

import { Children, PropsWithChildren } from "react"

import { CloseIcon } from "@/components/Icons"
import Title from "@/components/TempDesignSystem/Text/Title"

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

export default function Content({
  title,
  children,
  contentKey,
  isActive = false,
  onClose,
}: PropsWithChildren<{
  title?: string
  contentKey: string
  isActive?: boolean
  onClose?: () => void
}>) {
  return isActive ? (
    <aside className={styles.content}>
      <header className={styles.header}>
        {title && (
          <Title
            color="burgundy"
            textTransform="uppercase"
            level={"h2"}
            as={"h3"}
          >
            {title}
          </Title>
        )}
        <button
          onClick={() => {
            onClose && onClose()
          }}
          className={styles.closeBtn}
        >
          <CloseIcon color="burgundy" height={32} width={32} />
        </button>
      </header>
      {children}
    </aside>
  ) : null
}