import type { LoaderProps } from "@workshop/nano-remix"
import "../../index.css"
import { Cards } from "../../examples/cards"

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

export default function Example({ exampleName }: LoaderProps<typeof loader>) {
  let component = (
    <>
      <h1>Example {exampleName} not Found</h1>
      <p>Available examples: cards</p>
    </>
  )

  if (exampleName === "cards") {
    component = <Cards />
  }

  return (
    <div>
      <h1 class="p-4">{exampleName}</h1>
      {component}
    </div>
  )
}
