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

type SearchParams = {
  q?: string
}

export const Route = createFileRoute('/search')({
  validateSearch: (search: Record<string, unknown>): SearchParams => ({
    q: typeof search['q'] === 'string' ? search['q'] : undefined,
  }),
  component: SearchRoute,
})

function SearchRoute(): React.JSX.Element {
  const { q } = Route.useSearch()
  return (
    <>
      <SubBar>
        <Tag kind="neutral">search</Tag>
        {q != null && q !== '' && (
          <Tag kind="neutral">"{q}"</Tag>
        )}
      </SubBar>
      <div className="body body-pad">
        <EmptyState glyph="∅" copy="coming in a later task" />
      </div>
    </>
  )
}