import type { FC, ReactElement } from "react";
import type { ISection } from "./config/types";
import type { IComponentBaseProps } from "../../types/components/index";
import { useCN } from "../../utils/react/useCN";
import { Container } from "../container";
import "./style.pcss";

/**
 * Компонент секции
 * @returns {ReactElement}
 */
const Section: FC<ISection & IComponentBaseProps> = ({
  baseClass = "section",
  id,
  children = null,
  slotHeader = null,
  extraClasses = {},
  extraAttrs = {},
  slotFooter = null,
}): ReactElement => {

  const { getCN } = useCN(baseClass);

  return (
    <section id={id} className={getCN("", extraClasses)} {...extraAttrs}>
      <Container baseClass={`${getCN("wrap")} container`}>
        {!!slotHeader && <header className={getCN("header")}>{slotHeader}</header>}
        {!!children && <div className={getCN("content")}>{children}</div>}
        {!!slotFooter && <footer className={getCN("footer")}>{slotFooter}</footer>}
      </Container>
    </section>
  );

};

export type { ISection };
export {
  Section,
};