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

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

export default CardSection;