import React from 'react';
import styled from 'styled-components';

import type { LogoConfig } from '@redocly/theme/core/types';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { Link } from '@redocly/theme/components/Link/Link';
import { Image } from '@redocly/theme/components/Image/Image';

export type LogoProps = {
  config: LogoConfig;
  className?: string;
};

export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Element | null {
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();

  if (!config?.image && !config?.srcSet) {
    return null;
  }
  const image = (
    <Image className={className} src={config.image} srcSet={config.srcSet} alt={config.altText} />
  );

  return (
    <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
      {config.link ? (
        <Link to={config.link} onClick={() => telemetry.send('logo_clicked', {})}>
          {image}
        </Link>
      ) : (
        image
      )}
    </LogoWrapper>
  );
}

const LogoWrapper = styled.div`
  max-width: var(--logo-max-width);
  max-height: var(--logo-max-height);
  height: var(--logo-height);
  margin: var(--logo-margin);

  img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
`;