import React from "react";
import "./card-section-styles.scss";
import { CardSectionProps } from "@app/models/components";
import { mapLevelToPadding } from "@app/services/utilities";
import Button from "../button/Button";

const CardSection: React.FC<CardSectionProps> = ({
  padding = "lg",
  children,
  sectionID = "",
  sectionTitle = "",
  sectionSubtitle = "",
  sectionButton,
}) => {
  return (
    <div
      id={sectionID}
      className={`card-section ${mapLevelToPadding(padding)}`}
    >
      {sectionTitle && (
        <header>
          <div className="card-header">
            <h3>{sectionTitle}</h3>
            {sectionButton && <Button {...sectionButton} />}
          </div>
          {sectionSubtitle && <p>{sectionSubtitle}</p>}
        </header>
      )}
      {children}
    </div>
  );
};

export default CardSection;