// @flow strict

import * as React from 'react';

import classify from '../../../utils/classify';
import type {LinkProps} from '../../Link';
import {Link} from '../../Link';

import css from './BreadcrumbLink.module.css';


export type BreadcrumbLinkProps = {
  ...LinkProps,
  isActive?: boolean,
  id: string,
  onClick?: (SyntheticEvent<HTMLElement>, id: string) => mixed,
  ...
};

export const BreadcrumbLink: React$AbstractComponent<
  BreadcrumbLinkProps,
  ?HTMLAnchorElement,
> = React.forwardRef<BreadcrumbLinkProps, ?HTMLAnchorElement>(
  (
    {
      id,
      className,
      as,
      underline = false,
      isActive,
      onClick,
      href,
      to,
      ...props
    }: BreadcrumbLinkProps,
    ref,
  ) => (
    <Link
      {...props}
      to={to ?? href}
      data-testid="BreadcrumbLink"
      ref={ref}
      as={as || 'subTitleExtraSmall'}
      underline={underline}
      disabled={isActive}
      className={classify(
        css.breadcrumbLink,
        {[css.active]: isActive ?? window.location.href.includes(to ?? href)},
        className,
      )}
      onClick={(e) => {
        onClick?.(e, id);
      }}
    />
  ),
);

BreadcrumbLink.displayName = 'BreadcrumbLink';