'use client'
import { ArrowLeft } from 'lucide-react'
import { useRouter } from 'next/navigation';
import React from 'react'

const MainTitle = ({ title, children, goBack }: { title: string, children?: React.ReactNode, goBack?: boolean }) => {
    const router = useRouter();

    const handleGoBack = () => {
        router.back(); // This will navigate back to the previous page
    };

    return (
        <div className='mb-5 flex min-w-0 flex-col gap-4 md:flex-row md:items-start md:justify-between md:gap-5'>
            <div className='flex min-w-0 items-center gap-3'>
                {goBack && <ArrowLeft className='bg-white rounded size-8 p-2' onClick={handleGoBack} />}
                <h1 className='min-w-0 font-semibold text-lg capitalize text-gray-700'>{title}</h1>
            </div>
            <div className="min-w-0 w-full shrink-0 md:w-auto">{children}</div>
        </div>
    )
}

export default MainTitle