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";

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

const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
  const { t } = useTranslation("global");
  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>

        <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;
