import clsx from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';

import Link from '@/components/link/Link';

type Props = {
  active?: boolean;
  size?: 'sm' | undefined;
} & (
  | React.ComponentProps<typeof Link>
  | (React.ButtonHTMLAttributes<HTMLButtonElement> &
      Required<
        Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>
      > & { href?: never })
  | (React.HTMLAttributes<HTMLDivElement> & { href?: never; onClick?: never })
);

const NavTab: React.FC<Props> = (props) => {
  const { children, active, size, ...restProps } = props;

  const className = twMerge(
    clsx(
      'relative w-full flex flex-row items-center justify-left gap-2',
      'py-2 pl-10',
      'font-sans font-medium text-base/5',
      'before:block before:absolute before:inset-y-2 before:left-0 before:w-1 before:bg-primary',
      'before:origin-left before:opacity-50 before:scale-x-0 before:transition-transform before:duration-200',
      {
        'text-sm': size === 'sm',
        'cursor-pointer': props.href || props.onClick,
        'text-foreground-primary': active,
        'text-foreground-secondary hover:text-foreground-primary': !active,
        'before:opacity-100 before:scale-x-100': active,
        'hover:before:scale-x-100 hover:before:bg-foreground-primary hover:before:opacity-50':
          !active,
      }
    ),
    props.className
  );

  return restProps.href ? (
    <Link {...(restProps as React.ComponentProps<typeof Link>)}>
      <div className={className}>{children}</div>
    </Link>
  ) : restProps.onClick ? (
    <button
      {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
      className={className}
    >
      {children}
    </button>
  ) : (
    <div
      {...(restProps as React.HTMLAttributes<HTMLDivElement>)}
      className={className}
    >
      {children}
    </div>
  );
};

export default NavTab;