"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/shared/lib/utils"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"

const TABS = [
    { label: "Sales", href: "/settings/configurations/preferences/sales" },
    { label: "Purchases", href: "/settings/configurations/preferences/purchases" },
    { label: "General", href: "/settings/configurations/preferences/general" },
]

export default function ConfigurationsLayout({ children }: { children: React.ReactNode }) {
    const pathname = usePathname()

    return (
        <DashboardPage headerProps={{ title: "Configurations" }}>
            <div className="space-y-6">
                <nav className="flex gap-1 border-b">
                    {TABS.map((tab) => (
                        <Link
                            key={tab.href}
                            href={tab.href}
                            className={cn(
                                "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
                                pathname === tab.href
                                    ? "border-primary text-primary"
                                    : "border-transparent text-muted-foreground hover:text-foreground"
                            )}
                        >
                            {tab.label}
                        </Link>
                    ))}
                </nav>
                <div className="max-w-xl">
                    {children}
                </div>
            </div>
        </DashboardPage>
    )
}