import { ArrowRight, Setting2 } from "iconsax-react";
import type { FC } from "react";
import { useNavigate } from "react-router-dom";

type HeaderWorkspaceProps = {
  projectName: string;
  onSettingsClick?: () => void;
};

const HeaderWorkspace: FC<HeaderWorkspaceProps> = ({ projectName, onSettingsClick }) => {
  const navigate = useNavigate();

  return (
    <div className="flex justify-between items-center bg-primary h-14 sm:h-16 xl:h-[80px] px-3 sm:px-6 xl:px-8 shrink-0 gap-3">
      <div className="flex gap-2 sm:gap-4 items-center min-w-0">
        <div className="text-white text-base sm:text-lg xl:text-xl truncate">{projectName}</div>
        {/* <InfoCircle
          size={18}
          color="white"
        /> */}
      </div>

      <div className="flex gap-2 sm:gap-4 items-center shrink-0">
        <div
          onClick={() => navigate(-1)}
          className="flex gap-1 items-center px-2 sm:px-3 rounded-lg bg-white h-8"
        >
          <ArrowRight
            size={18}
            color="black"
          />
          <div className="text-black text-xs hidden sm:block whitespace-nowrap">برگشت</div>
        </div>

        <Setting2
          size={18}
          color="white"
          className="min-w-[18px] cursor-pointer"
          onClick={onSettingsClick}
        />
      </div>
    </div>
  );
};

export default HeaderWorkspace;
