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

import type { JSX } from 'react';

import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';

type BreadcrumbIconProps = {
  icon?: string;
  className?: string;
};

export function BreadcrumbIcon({ icon, className }: BreadcrumbIconProps): JSX.Element | null {
  if (!icon) {
    return null;
  }

  return (
    <BreadcrumbIconWrapper data-component-name="Breadcrumbs/BreadcrumbIcon" className={className}>
      <GenericIcon icon={icon} size="var(--breadcrumbs-icon-size)" />
    </BreadcrumbIconWrapper>
  );
}

const BreadcrumbIconWrapper = styled.span`
  display: inline-flex;
  align-items: center;
  width: var(--breadcrumbs-icon-size);
  justify-content: center;
`;