import React, { FC } from "react";
import { useStoreState } from "../../store";
import {
  SectionHeaderWrapper,
  TextBold,
  TextWrapper,
} from "../Section/Sections.styles";
import { Aligment, Button, DropdownMenu, IAction, Icon, Text } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";

interface IProjectHeaderProps {
  title: string;
  actionLabel: string;
  handleBack: () => void;
  handleClick: () => void;
  options: IAction[];
}
export const ProjectHeader: FC<IProjectHeaderProps> = ({
  title,
  actionLabel,
  handleBack,
  handleClick,
  options,
}) => {
  const { orgRole } = useStoreState((state) => state.user.userDetails);
  const isReadOnly = orgRole === "readOnly";
  return (
    <SectionHeaderWrapper>
      <Aligment align="center" direction="row" width="100%;">
        <Aligment align="center" direction="row" width="auto" gap={8}>
          {handleBack && (
            <Icon name="back_arrow" onClick={() => handleBack()} />
          )}
          <Aligment align="center" direction="row" width="auto" gap={32}>
            <TextWrapper>
              <Text>{t(dictionary.project)}</Text>
              <TextBold>{title}</TextBold>
            </TextWrapper>
          </Aligment>
        </Aligment>
        <Aligment align="center" width="auto">
          <Button
            mode="ghost"
            text={actionLabel}
            onClick={() => handleClick()}
            isDisabled={isReadOnly}
          />
          <DropdownMenu options={options} size="lg" />
        </Aligment>
      </Aligment>
    </SectionHeaderWrapper>
  );
};