'use client';

import clsx from 'clsx';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export type TabLinkProps = Omit<
    React.ComponentPropsWithRef<typeof Link>,
    'href'
> & {
    href: React.ComponentProps<typeof Link>['href'] | (string & {});
};

export const TabLink = ({ className, href, ...props }: TabLinkProps) => {
    const path = usePathname();

    const hrefSegment =
        typeof href === 'string' ? href.replace(/^\/+|\/+$/g, '') : null;
    const isActive = hrefSegment && path.split('/').includes(hrefSegment);

    return (
        <Link
            href={href as React.ComponentProps<typeof Link>['href']}
            className={clsx([
                'font-medium text-12 uppercase tracking-wider hover:no-underline',
                'border-b-2 pb-1',
                isActive
                    ? 'border-gray-900 text-gray-900 hover:text-black'
                    : 'border-transparent text-gray-500 hover:text-gray-700',
                className,
            ])}
            {...props}
        />
    );
};