import { Component } from 'solid-js';
import { peekCachedSignal } from '../../workers/cached-signals';
import Tree from '../tree';
import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';

interface Props {
  trksegId: string;
}

const TrksegViewer: Component<Props> = ({ trksegId }) => {
  const trkseg = peekCachedSignal({ id: trksegId, method: 'getTrkseg' });
  console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });
  const title = () => {
    return trkseg().name;
  };

  return (
    <Tree
      title={
        <>
          <TrkIcon fill='grey' width='16' height='16' /> {title()}
        </>
      }
      content={undefined}
      subTree={undefined}
    />
  );
};

export default TrksegViewer;