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 { StyledImage, StyledImageWrapper, StyledLinkWrapper } from './styled';

/** Props for {@link NavigationPanelLogo} */
export interface NavigationPanelLogoProps extends CommonProps {
  /** Text near image */
  label: ReactNode;
  /** Url that will be opened when link is clicked */
  to: string;
  /** Image path */
  src: string;
}

/**
 * Predefined component to creating {@link NavigationPanel} logo
 */
export function NavigationPanelLogo(props: NavigationPanelLogoProps) {
  const { to, label, src, testId, className, ariaDescribedBy, ...restProps } = props;
  assertEmptyObject(restProps);

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

  return (
    <StyledLinkWrapper
      aria-describedby={ariaDescribedBy}
      className={className}
      {...{ [testIdAttribute]: testId }}
    >
      <Link to={to}>
        <StyledImageWrapper>
          <StyledImage src={src} />
        </StyledImageWrapper>
        {label}
      </Link>
    </StyledLinkWrapper>
  );
}