"use client"

import { PropsWithChildren } from "react"

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

import Button from "../../Button"

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

function SidePeekItem({
  title,
  children,
  isActive = false,
  onClose,
}: PropsWithChildren<SidePeekContentProps>) {
  return isActive ? (
    <aside className={styles.sidePeekItem}>
      <header className={styles.header}>
        <Title color="burgundy" textTransform="uppercase" level="h2" as="h3">
          {title}
        </Title>
        <Button
          intent="text"
          onClick={() => {
            onClose && onClose()
          }}
        >
          <CloseIcon color="burgundy" height={32} width={32} />
        </Button>
      </header>
      {children}
    </aside>
  ) : null
}

export default SidePeekItem