'use client';
import * as React from 'react';
import { Icon } from '@/lib/icons';
import { useGo, RouteName, GoParams } from '@/lib/router';

export type CrumbItem = { label: string; go?: [RouteName, GoParams?] };

export function Crumb({ items }: { items: CrumbItem[] }) {
  const { go } = useGo();
  return (
    <div className="row gap8 small" style={{ flexWrap: 'wrap' }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevronRight" size={13} style={{ color: 'var(--faint)' }} />}
          <span
            style={{
              cursor: it.go ? 'pointer' : 'default',
              color: i === items.length - 1 ? 'var(--ink)' : 'var(--muted)',
              fontWeight: i === items.length - 1 ? 600 : 500,
            }}
            onClick={() => it.go && go(it.go[0], it.go[1] || {})}
          >
            {it.label}
          </span>
        </React.Fragment>
      ))}
    </div>
  );
}