import { View } from 'react-native';

import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

interface BreadcrumbsProps {
  items: string[];
  className?: string;
  textClassName?: string;
}

export function Breadcrumbs({ items, className, textClassName }: BreadcrumbsProps) {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <View
      accessibilityRole="header"
      accessibilityLabel={items.join(' > ')}
      className={cn('flex-row items-center', className)}
    >
      <Text variant="bodyMedium" tone="muted" numberOfLines={1} className={cn(textClassName)}>
        {items.join(' > ')}
      </Text>
    </View>
  );
}