import type { LoaderProps } from "@workshop/nano-remix"
import "../index.css"
import { readdir } from "node:fs/promises"
import { join, basename } from "node:path"
import { VStack } from "../lib/stack"

export const loader = async (req: Request) => {
  const examples = await readdir(join(import.meta.dir, "../examples"))
  const tests = await readdir(join(import.meta.dir, "../lib"))
  return {
    examples: examples.map((file) => basename(file, ".tsx")),
    tests: tests.map((file) => basename(file, ".tsx")),
  }
}

export function App({ examples, tests }: LoaderProps<typeof loader>) {
  return (
    <div class="m-8">
      <h1 class="text-3xl font-bold mb-4">Werewolf UI</h1>
      <h2>Tests</h2>
      <VStack>
        {tests.sort().map((test) => (
          <a class="underline text-blue-500" key={test} href={`/tests/${test}`}>
            {test}
          </a>
        ))}
      </VStack>

      <h2 class="mt-8">Examples</h2>
      <VStack>
        {examples.map((example) => (
          <a class="underline text-blue-500" key={example} href={`/examples/${example}`}>
            {example}
          </a>
        ))}
      </VStack>
    </div>
  )
}

export default App
