import { createElement } from 'react';

import { Stack, useTheme } from '@mui/material';

import { type BreadcrumbsLinkBoxProps } from '../types';

export const BreadcrumbsLinkBox = ({
  children,
  breadcrumbIcon,
}: BreadcrumbsLinkBoxProps) => {
  const { palette } = useTheme();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        minWidth: 0,
        maxWidth: '100%',
      }}
    >
      {children}
      {breadcrumbIcon
        ? createElement(breadcrumbIcon, {
            sx: {
              ml: 0.25,
              width: 16,
              height: 16,
              flexShrink: 0,
              color: palette.new.action.button.background.primary.default,
            },
          })
        : null}
    </Stack>
  );
};
