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

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) => {
    return (
      <IconButton onClick={item.onClick} key={item.text}>
        <Paragraph hover size="small">
          {item.text}
        </Paragraph>
      </IconButton>
    );
  };
  return (
    <StyledBreadcrumbs $theme={theme} {...props}>
      {data.map(breadcrumbComponent)}
    </StyledBreadcrumbs>
  );
};
