import { ReactNode } from 'react';

import { useLinkComponent } from '../../../../core/hooks/useLinkComponent';
import { useTestIdAttribute } from '../../../../hooks/useTestIdAttribute';
import { CommonProps } from '../../../../types';
import { assertEmptyObject } from '../../../../utils/assertEmptyObject';

import { StyledItem, StyledLinkWrapper } from './styled';

/** Props for {@link NavigationPanelItem} */
export interface NavigationPanelItemProps extends CommonProps {
  /** Url that will be opened when link is clicked */
  to: string;
  /** Link text */
  label: ReactNode;
  /** If `true`, the item will be designed as active */
  active?: boolean;
}

/**
 * {@link NavigationPanel} item
 */
export function NavigationPanelItem(props: NavigationPanelItemProps) {
  /* istanbul ignore next */
  const { to, label, active = false, testId, className, ariaDescribedBy, ...restProps } = props;
  assertEmptyObject(restProps);

  const testIdAttribute = useTestIdAttribute();
  const Link = useLinkComponent();

  return (
    <StyledLinkWrapper $active={active}>
      <Link
        aria-current={active ? 'page' : false}
        aria-describedby={ariaDescribedBy}
        className={className}
        role="menuitem"
        to={to}
        {...{ [testIdAttribute]: testId }}
      >
        <StyledItem $active={active}>{label}</StyledItem>
      </Link>
    </StyledLinkWrapper>
  );
}