/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';

import uniqueId from 'lodash/uniqueId';
import { Tooltip } from '../Tooltip';
import { BreadcrumbItem, BreadcrumbsProps } from './types.d';
import { Paragraph } from '../Paragraph';
import { IconButton } from '../Icon-Button';
import { StyledBreadcrumbs } from './styled-component';
import { useTheme } from '../Theme';

export const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = (props) => {
  const { data } = props;
  const theme = useTheme();

  const breadcrumbComponent = (item: BreadcrumbItem) => {
    const isShowTooltip = item?.text?.length > 25;
    return (
      <Tooltip title={isShowTooltip ? item.text : undefined}>
        <IconButton onClick={item.onClick} key={item.text ?? uniqueId()}>
          <Paragraph hover size="small" className="breadcrumb-text">
            {item.text}
          </Paragraph>
        </IconButton>
      </Tooltip>
    );
  };
  return (
    <StyledBreadcrumbs $theme={theme} {...props}>
      {data.map(breadcrumbComponent)}
    </StyledBreadcrumbs>
  );
};
