import React, { ReactElement } from 'react';
import {
  ABreadcrumbItem,
  BreadcrumbItemSeparator,
  TextBreadcrumbWrapper,
  LinkBreadcrumbWrapper,
  LinkBreadcrumbItem,
} from './StyledBreadcrumb';

export interface BreadcrumbItemProps {
  /**
   * Whether this BreadcrumbItem is the current one.
   */
  current?: boolean;
  /**
   * Specifies the URL of the page the link goes to.
   */
  href: string;
  /**
   * Name of BreadcrumbItem.
   */
  text: string;
  /**
   * Indicate if BreadcrumbItem is compatible with routing using react-router. A Link component will be rendered instead of an usual HTML a tag.
   */
  withRouter?: boolean;
  /**
   * Indicate if BreadcrumbItem is followed by a separator.
   */
  withSeparator?: boolean;
}

const BreadcrumbItem = ({
  href,
  text,
  withSeparator = true,
  current = false,
  withRouter = false,
}: BreadcrumbItemProps): ReactElement =>
  current === true ? (
    <TextBreadcrumbWrapper>{text}</TextBreadcrumbWrapper>
  ) : (
    <LinkBreadcrumbWrapper>
      {withRouter === true ? (
        <LinkBreadcrumbItem to={href}>{text}</LinkBreadcrumbItem>
      ) : (
        <ABreadcrumbItem href={href}>{text}</ABreadcrumbItem>
      )}
      {withSeparator === true && (
        <BreadcrumbItemSeparator>/</BreadcrumbItemSeparator>
      )}
    </LinkBreadcrumbWrapper>
  );

export default BreadcrumbItem;