npx @nativecn/cli add breadcrumb

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../components/ui/breadcrumb';
import { useColorScheme, useNavigation } from 'react-native';

export function NavigationBreadcrumb({ path }) {
  const colorScheme = useColorScheme();
  const navigation = useNavigation();
  
  return (
    <Breadcrumb>
      <BreadcrumbList mode={colorScheme}>
        {path.map((item, index) => (
          <React.Fragment key={item.path}>
            <BreadcrumbItem>
              {index === path.length - 1 ? (
                <BreadcrumbPage mode={colorScheme}>{item.label}</BreadcrumbPage>
              ) : (
                <BreadcrumbLink 
                  mode={colorScheme}
                  onPress={() => navigation.navigate(item.path)}
                >
                  {item.label}
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
            {index < path.length - 1 && (
              <BreadcrumbSeparator mode={colorScheme} />
            )}
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
}

// Breadcrumb Props
interface BreadcrumbProps extends ViewProps {
  className?: string;
}

// BreadcrumbList Props
interface BreadcrumbListProps extends ViewProps {
  className?: string;
  mode?: 'light' | 'dark';
}

// BreadcrumbItem Props
interface BreadcrumbItemProps extends ViewProps {
  className?: string;
}

// BreadcrumbLink Props
interface BreadcrumbLinkProps extends PressableProps {
  className?: string;
  textClassName?: string;
  asChild?: boolean;
  mode?: 'light' | 'dark';
}

// BreadcrumbPage Props
interface BreadcrumbPageProps extends TextProps {
  className?: string;
  mode?: 'light' | 'dark';
}

// BreadcrumbSeparator Props
interface BreadcrumbSeparatorProps extends ViewProps {
  className?: string;
  children?: React.ReactNode;
  mode?: 'light' | 'dark';
}

// BreadcrumbEllipsis Props
interface BreadcrumbEllipsisProps extends ViewProps {
  className?: string;
  mode?: 'light' | 'dark';
}