import React, { ReactNode, JSX } from 'react';
import styled from 'styled-components';

export type CatalogEntityInfoBarProps = {
  leftContent: ReactNode;
  rightContent?: ReactNode;
  withSeparator?: boolean;
  hoverEffect?: boolean;
  isCodeBlock?: boolean;
};

export function CatalogEntityInfoBar({
  leftContent,
  rightContent,
  withSeparator = true,
  hoverEffect = true,
  isCodeBlock = false,
}: CatalogEntityInfoBarProps): JSX.Element {
  return (
    <InfoBarWrapper
      data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar"
      hoverEffect={hoverEffect}
    >
      <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
      {rightContent && <RightColumn isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
    </InfoBarWrapper>
  );
}

const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'left right';
  align-items: center;

  color: var(--catalog-card-text-color, inherit);
  background-color: var(--catalog-card-bg-color);
  border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
    var(--catalog-card-border-color);
  border-radius: var(--catalog-card-border-radius);
  transition: all 0.2s ease-in-out;
  height: 100%;
  padding: var(--catalog-card-gap);
  margin-bottom: var(--spacing-xs);

  ${({ hoverEffect }) =>
    hoverEffect &&
    `
    &:hover {
      border-color: var(--catalog-card-border-color-hover);
      background-color: var(--bg-color-active);
    }
  `}
`;

const LeftColumn = styled.div<{ withSeparator?: boolean }>`
  font-weight: var(--font-weight-medium);
  color: var(--catalog-metadata-label-color);
  width: 100%;
  grid-area: left;
  justify-self: start;
  text-align: left;
  border-right: ${({ withSeparator }) =>
    withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
  height: 100%;
  display: flex;
  align-items: center;
`;

const RightColumn = styled.div<{ isCodeBlock?: boolean }>`
  color: var(--catalog-metadata-value-color);
  font-weight: var(--font-weight-medium);
  grid-area: right;
  justify-self: end;
  text-align: right;
  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
`;