import { createFileRoute } from '@tanstack/react-router'
import React from 'react'
import { EmptyState } from '../primitives'
import { SubBar } from '../shell/SubBar'
import { Tag } from '../primitives'

export const Route = createFileRoute('/session/$tool/$host/$id')({
  component: SessionRoute,
})

function SessionRoute(): React.JSX.Element {
  const { tool, host, id } = Route.useParams()
  return (
    <>
      <SubBar>
        <Tag kind="tool">{tool}</Tag>
        <Tag kind="host">{host}</Tag>
      </SubBar>
      <div className="body body-pad">
        <EmptyState glyph="∅" copy="coming in Phase 6" />
        <div className="mono muted" style={{ marginTop: 8, fontSize: 11 }}>{id}</div>
      </div>
    </>
  )
}