import { TLinkSizes } from '@/components';
import { LINK_SIZES } from '@/components/link/config/link.config';
import { TLinkSharedProps } from '@/components/link/types/TLinkSharedProps';
import { classNames } from '@/utils/classNames';

export type TLinkProps = TLinkSharedProps & {
  colorScheme?: string;
  size: TLinkSizes;
};

export function Link({
  children,
  href,
  innerRef,
  onClick,
  size,
  colorScheme = 'text-gray-ui after:bg-gray-ui',
}: TLinkProps): React.ReactElement {
  return (
    <a
      ref={innerRef}
      href={href}
      className={classNames(
        'inline-flex relative transition duration-std after:absolute after:bottom-[2px] after:left-0 after:h-px after:w-full hover:after:bg-transparent after:transition-all after:duration-std cursor-pointer',
        LINK_SIZES[size],
        colorScheme,
      )}
      onClick={onClick}
    >
      {children}
    </a>
  );
}