"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";  

const stepLinks = [
    { name: "Step One", href:"/start/stepone"},
    { name: "Step Two", href:"/start/steptwo"},
    { name: "Step Three", href:"/start/stepthree"},
]


export default function StepsLayout ({children}: any){
    const pathname = usePathname();
    return (
        <>
        <div>
                {stepLinks.map((link) =>{
                    const isActive = pathname.startsWith(link.href);
                    return(
                        <Link href={link.href} key={link.name} className={isActive ? "font-bold mr-4":"text-blue-500 mr-4"}>
                            {link.name}
                        </Link>
                    )
                })}
             
            </div>
            {children}            
        </>
    )
  }