import { Add, Setting2 } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } 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;

  return (
    <div className="flex w-full justify-between items-center">
      <h1>{title}</h1>

      <div className="flex items-center gap-3">
        <Button onClick={onSettingsClick} className="flex items-center gap-2 bg-[#C3C7DD] text-black whitespace-nowrap px-4">
          <Setting2 size={18} color="black" />
          <span>{t("sidebar.setting")}</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;