import { ReactNode } from 'react';
import { Box } from './Box';
import { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs';

export interface BreadcrumbBarProps {
  items: BreadcrumbItem[];
  actions?: ReactNode;
}

export const BreadcrumbBar = ({ 
  items, 
  actions 
}: BreadcrumbBarProps) => {
  return (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent="between" 
      paddingY={4} 
      borderBottom
    >
      <Breadcrumbs items={items} />
      {actions && (
        <Box display="flex" alignItems="center" gap={4}>
          {actions}
        </Box>
      )}
    </Box>
  );
};