'use client';

import { CircleFadingPlus } from "lucide-react";
import Button from "../Button";
import { useRouter } from "next/navigation";

export const InvestmentTitle = () => {
  const router = useRouter();

    const navigateToCreateInvestment = () => {
      router.push('/investments/investmentplans');
    }

    return (
        <div className="mb-6 sm:mb-8 flex items-center justify-between">
            <div>
                <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Investment</h2>
                <p className="text-gray-600 text-sm sm:text-base">This is an overview of your Investment activities</p>
            </div>
            
            <Button 
              type="submit"
              width="20%"
              onClick={navigateToCreateInvestment}
            > 
              <div className="flex items-center justify-center gap-2">
                <CircleFadingPlus size={16} strokeWidth={3} />
                <h4>Create Investment</h4>
              </div>
            </Button>
        </div>
    );
};