import { Add, ArrowRight } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import Button from "../../../../components/Button";
import { Pages } from "../../../../config/Pages";
import { usePermissions } from "../../../../hooks/usePermissions";

type Props = {
  title: string;
  workspaceId?: string;
  onSettingsClick?: () => void;
};

const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
  const { t } = useTranslation("global");
  const { canCreate } = usePermissions();
  const createProjectLink = workspaceId ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` : Pages.taskmanager.createProject;
  const navigate = useNavigate();
  return (
    <div className="flex w-full justify-between items-center">
      <h1>{title}</h1>

      <div className="flex items-center gap-3">
        <Button
          onClick={() => navigate(-1)}
          className="flex items-center gap-2 bg-[#C3C7DD] text-black whitespace-nowrap px-4"
        >
          <ArrowRight
            size={18}
            color="black"
          />
          <span>برگشت</span>
        </Button>

        {canCreate("project") && (
          <Link to={createProjectLink}>
            <Button
              onClick={onSettingsClick}
              className="flex items-center gap-2 whitespace-nowrap px-4"
            >
              <Add
                size={18}
                color="white"
              />
              <span>{t("taskmanager.new_project")}</span>
            </Button>
          </Link>
        )}
      </div>
    </div>
  );
};

export default ProjectListHeader;