'use client';
import { cn } from '@/lib/utils';
import { ChevronLeft } from 'lucide-react';
import { useRouter } from 'next/navigation';

const BackButton = ({
	isWhite = false,
	className = '',
}: {
	isWhite?: boolean;
	className?: string;
}) => {
	const router = useRouter();
	return (
		<header className=" pt-8 pb-6 flex items-center gap-2">
			<button
				onClick={(e) => {
					e.preventDefault();
					router.back();
				}}
				className={cn(
					'flex items-center gap-2 ',
					isWhite
						? 'text-white hover:text-primary'
						: 'text-ring hover:text-primary',
					className
				)}
			>
				<ChevronLeft size={27} />
				<span className="font-semibold text-lg">Back</span>
			</button>
		</header>
	);
};

export default BackButton;