import type {
  HTMLAttributeAnchorTarget,
  CSSProperties,
  MouseEvent,
  RefAttributes,
} from "react";
import type React from "react";
import classNames from "classnames/dedupe";
import "./Link.css";

export type LinkElementType = HTMLAnchorElement;

export interface LinkProps extends RefAttributes<LinkElementType> {
  id?: string;
  children?: React.ReactNode;
  /** Path to link resource or page */
  href?: string;
  /** Custom class name for setting specific CSS */
  className?: string;
  title?: string;
  style?: React.CSSProperties;
  referrerPolicy?: ReferrerPolicy;
  download?: boolean | string;
  rel?: string;
  target?: HTMLAttributeAnchorTarget;
  isDisabled?: boolean;
  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
  to?: unknown;
  elementType?: React.ElementType;
  /** Visual style variant for the link */
  variant?: "primary" | "secondary";
}

const Link = ({ ref, ...props }: LinkProps) => {
  const {
    isDisabled = false,
    elementType: Component = "a",
    style,
    className,
    variant = "primary",
    ...otherProps
  } = props;

  const disabledStyles: CSSProperties = {
    pointerEvents: "none",
  };

  const styles = { ...style, ...(isDisabled && disabledStyles) };
  const classes = classNames(
    "mobius",
    "mobius-link",
    className,
    `mobius-link--${variant}`,
    {
      "--is-disabled": isDisabled,
    },
  );

  return (
    <Component
      ref={ref}
      style={styles}
      className={classes}
      aria-disabled={isDisabled ? true : undefined}
      {...otherProps}
    >
      {props.children}
    </Component>
  );
};

Link.displayName = "Link";
export { Link };
