import type { LoaderProps } from "@workshop/nano-remix"
import "../../index.css"
import { Test as AvatarTest } from "../../lib/avatar"
import { Test as DividerTest } from "../../lib/divider"
import { Test as ButtonTest } from "../../lib/button"
import { Test as GridTest } from "../../lib/grid"
import { Test as IconTest } from "../../lib/icon"
import { Test as ImageTest } from "../../lib/image"
import { Test as InputTest } from "../../lib/input"
import { Test as PlaceholderTest } from "../../lib/placeholder"
import { Test as SelectTest } from "../../lib/select"
import { Test as StackTest } from "../../lib/stack"

export const loader = async (req: Request) => {
  const testName = req.url.split("/").pop() || ""
  return { testName }
}

export default function Test({ testName }: LoaderProps<typeof loader>) {
  let component = (
    <>
      <h1>Test {testName} not Found</h1>
      <p>Available tests: cards</p>
    </>
  )

  if (testName === "avatar") {
    component = <AvatarTest />
  } else if (testName === "divider") {
    component = <DividerTest />
  } else if (testName === "button") {
    component = <ButtonTest />
  } else if (testName === "grid") {
    component = <GridTest />
  } else if (testName === "icon") {
    component = <IconTest />
  } else if (testName === "image") {
    component = <ImageTest />
  } else if (testName === "input") {
    component = <InputTest />
  } else if (testName === "placeholder") {
    component = <PlaceholderTest />
  } else if (testName === "select") {
    component = <SelectTest />
  } else if (testName === "stack") {
    component = <StackTest />
  }

  return (
    <div>
      <h1 class="p-4">
        {testName}
        {" : "}
        <a class="underline text-blue-500 italic" href="/">
          back
        </a>
      </h1>

      {component}
    </div>
  )
}
