import React from "react";
import {
  ButtonIcon,
  CampaignStatus,
  CampaignStatuses,
  Typography,
} from "@komi-app/components";
import "./CampaignPageHeader.scss";
import { CampaignMenuProps } from "./CampaignMenu";

export interface CampaignPageHeaderProps {
  name: string;
  onBackClick: () => void;
  status: CampaignStatuses | null;
  menu?: React.ReactElement<CampaignMenuProps>;
}

const CampaignPageHeader = ({
  name,
  onBackClick,
  status,
  menu,
}: CampaignPageHeaderProps) => {
  return (
    <div className="campaign-page-header">
      <div className="title">
        <ButtonIcon
          className="campaign-page-header-arrow"
          icon="arrow/leftLong"
          onClick={onBackClick}
        />
        <Typography.Heading level={3}>{name}</Typography.Heading>
      </div>
      <div className="status">
        {status && (
          <>
            <CampaignStatus status={status} />
            {menu}
          </>
        )}
      </div>
    </div>
  );
};

export default CampaignPageHeader;
