"use client";

import React from "react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { cn } from "@app/lib/cn";

export type HorizontalTabs = Array<{
    title: string;
    href: string;
    icon?: React.ReactNode;
}>;

interface HorizontalTabsProps {
    children: React.ReactNode;
    items: HorizontalTabs;
    disabled?: boolean;
}

export function HorizontalTabs({
    children,
    items,
    disabled = false
}: HorizontalTabsProps) {
    const pathname = usePathname();
    const params = useParams();

    function hydrateHref(href: string) {
        return href
            .replace("{orgId}", params.orgId as string)
            .replace("{resourceId}", params.resourceId as string)
            .replace("{niceId}", params.niceId as string)
            .replace("{userId}", params.userId as string)
            .replace("{apiKeyId}", params.apiKeyId as string);
    }

    return (
        <div className="space-y-6">
            <div className="relative">
                <div className="overflow-x-auto scrollbar-hide">
                    <div className="flex space-x-4 border-b min-w-max">
                        {items.map((item) => {
                            const hydratedHref = hydrateHref(item.href);
                            const isActive =
                                pathname.startsWith(hydratedHref) &&
                                !pathname.includes("create");

                            return (
                                <Link
                                    key={hydratedHref}
                                    href={hydratedHref}
                                    className={cn(
                                        "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
                                        isActive
                                            ? "border-b-2 border-primary text-primary"
                                            : "text-muted-foreground hover:text-foreground",
                                        disabled && "cursor-not-allowed"
                                    )}
                                    onClick={(e) => {
                                        if (disabled) {
                                            e.preventDefault();
                                        }
                                    }}
                                    tabIndex={disabled ? -1 : undefined}
                                    aria-disabled={disabled}
                                >
                                    <div
                                        className={cn(
                                            "flex items-center space-x-2",
                                            disabled && "opacity-60"
                                        )}
                                    >
                                        {item.icon && item.icon}
                                        <span>{item.title}</span>
                                    </div>
                                </Link>
                            );
                        })}
                    </div>
                </div>
            </div>
            <div className="space-y-6">{children}</div>
        </div>
    );
}
