import React from 'react';
import Link from '../link/Link';
import Text from "../text/Text";
import style from "./BreadCrumbs.module.css";
import compileClassNames from "../../libraries/compileClassNames";

export default function (props) {
  let {
    text,
    children,
    href,
    onClick,
    active,

    dataId,
    ariaLabel,
    role,
    ariaCurrent,

    customClassName,
    isEllipsis,
    size,

    tagAttributeProps
  } = props;
  let classes = compileClassNames(customClassName, {
    [style.flex]: true
  });
  let contentClassName = compileClassNames(
    customClassName,
    {
      [style.content]: true
    },
    {
      [customClassName.content]: !!customClassName.content
    }
  );
  return (
    <li
      aria-label={ariaLabel}
      aria-current={ariaCurrent}
      role={role}
      className={classes}
      {...tagAttributeProps}
    >
      {href && !active ? (
        <span className={contentClassName}>
          <Link
            text={text}
            href={href}
            onClick={onClick}
            customIdPrefix={dataId}
            size={size}
            active={active}
            textEllipsis={isEllipsis}
          />
        </span>
      ) : typeof children == "string" || text ? (
        <span className={contentClassName}>
          <Text
            onClick={onClick}
            customIdPrefix={dataId}
            content={children ? children : text}
            size={size}
            isEllipsis={isEllipsis}
          />
        </span>
      ) : (
        children
      )}
    </li>
  );
}
