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

import type { JSX } from 'react';

export type SidebarLogoProps = {
  imageUrl?: string;
  href?: string;
  altText?: string;
  dataTestId?: string;
  backgroundColor?: string;
  className?: string;
};

export function SidebarLogo({
  imageUrl,
  href,
  altText,
  backgroundColor,
  dataTestId,
  className,
}: SidebarLogoProps = {}): JSX.Element | null {
  if (!imageUrl) {
    return null;
  }

  const logo = <LogoImgEl src={imageUrl} alt={altText || 'logo'} />;

  return (
    <LogoWrap
      data-testid={dataTestId}
      style={{ backgroundColor }}
      data-component-name="SidebarLogo/SidebarLogo"
      className={className}
    >
      {href ? <Link href={href}>{logo}</Link> : logo}
    </LogoWrap>
  );
}

const LogoImgEl = styled.img`
  max-height: var(--sidebar-logo-max-height);
  max-width: var(--sidebar-logo-max-width);
  padding: var(--sidebar-logo-padding);
  width: 100%;
  display: block;
`;

const LogoWrap = styled.div`
  text-align: center;
  line-height: 0;
`;

const Link = styled.a`
  display: inline-block;
`;