import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Text, TextProps } from '../text';
import * as css from './link.css';

/*-- Types --*/

export interface LinkProps extends Omit<TextProps, 'color'> {
  disabled?: boolean;
}

/*-- Main --*/

export const Link = forwardRef<'a', LinkProps>(function Link(
  { className, color: _color, disabled, href, ...rest },
  ref,
) {
  const cn = clsx(className, css.link({ disabled }));

  return (
    <Text
      ref={ref}
      as="a"
      className={cn}
      {...rest}
      href={disabled ? undefined : href}
      role={disabled ? 'none' : undefined}
      aria-disabled={disabled ? true : undefined}
    />
  );
});