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

import type { JSX } from 'react';
import type { ProductConfig } from '@redocly/theme/config';

export type ProductProps = {
  product: ProductConfig;
  className?: string;
};

export function Product({ product, className }: ProductProps): JSX.Element {
  return (
    <ProductWrapper data-component-name="Product/Product" className={className}>
      {product.icon && <ProductLogo src={product.icon} />}
      <span>{product.name}</span>
    </ProductWrapper>
  );
}

const ProductWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: var(--product-logo-gap);
`;

const ProductLogo = styled.img`
  max-height: var(--select-line-height);
`;