import React from "react";
import "./card-header-styles.scss";
import { CardHeaderProps } from "@app/models/components";
import Button from "../button/Button";
import { mapLevelToPadding } from "@app/services/utilities";
import { BackIcon, CloseIcon } from "@app/assets/images/icons";

const CardHeader: React.FC<CardHeaderProps> = ({
  padding = "lg",
  title,
  subtitle = "",
  actionButtons = [],
  backButton,
  showCloseButton = true,
  onClose,
  id,
}) => {
  const sizeMapping = {
    sm: "backButton-sm",
    md: "backButton-md",
    lg: "backButton-lg",
  };

  return (
    <div id={id} className={`cardHeader-root ${mapLevelToPadding(padding)}`}>
      {backButton && (
        <div
          className={`cardHeader-backButton--root ${
            sizeMapping[backButton.size ?? "md"]
          }`}
        >
          <Button
            icon={BackIcon}
            variant="tertiary"
            shape="circular"
            size="md"
            id="cardHeader-backButton"
            onClickHandler={backButton.onClick}
          />
        </div>
      )}
      <div className="cardHeader-container">
        <div className="cardHeader-info">
          <h2>{title}</h2>
          {subtitle && <p>{subtitle}</p>}
        </div>

        {showCloseButton && (
          <Button
            variant="tertiary"
            icon={CloseIcon}
            onClickHandler={onClose}
            collapse
          />
        )}
      </div>
      {!!actionButtons.length && (
        <div className="cardHeader-actionButtons">
          {actionButtons.map((buttonProps, index) => (
            <Button key={index} {...buttonProps} />
          ))}
        </div>
      )}
    </div>
  );
};

export default CardHeader;