"use client";

import { useRouter } from "next/navigation";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/app/shadcn_components/ui/tooltip";

const BackToPortfolioButton = ({ portfolioId }: { portfolioId: string }) => {
  const router = useRouter();

  const handleBackClick = () => {
    router.push(`/portfolio/${portfolioId}`);
  };

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            onClick={handleBackClick}
            className="bg-white hover:bg-gray-200 text-brandblue font-bold py-2 px-4 rounded-full"
          >
            <ArrowLeftIcon className="w-5 h-5 mr-1" />
          </button>
        </TooltipTrigger>
        <TooltipContent className="bg-brandblue text-gray-100">
          Back to Portfolio
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default BackToPortfolioButton;
