import React from 'react';
import { Box, Text } from '@wix/design-system';

export interface BreadcrumbItem {
  id: string;
  name: string;
}

export interface TextBreadcrumbsProps {
  items: BreadcrumbItem[];
  dataHook?: string;
}

export function TextBreadcrumbs(props: TextBreadcrumbsProps) {
  const { dataHook, items } = props;

  return (
    <Box direction="horizontal" minWidth={0} dataHook={dataHook}>
      {items.map((item) => {
        return (
          <Box key={item.id} minWidth={0}>
            <Text ellipsis size="small">
              {item.name}
            </Text>
            <Text size="small">
              &nbsp;
              {'>'}
              &nbsp;
            </Text>
          </Box>
        );
      })}
    </Box>
  );
}