import KV from "@workshop/shared/kv"
import { type Head, type LoaderProps } from "@workshop/nano-remix"
import "../index.css"

export const head: Head = {
  title: "Todos",
}

export const loader = async () => {
  const todos = await KV.get("todos", {})
  const todoLists = Object.keys(todos)
  return { todoLists }
}

export default ({ todoLists }: LoaderProps<typeof loader>) => {
  return (
    <div class="p-4">
      <h1 class="text-2xl font-bold mb-4">Todo Lists</h1>
      <ul class="space-y-2">
        {todoLists.map((listName) => (
          <li key={listName}>
            <a
              href={`/todos/${listName}`}
              class="block p-3 bg-white border rounded hover:bg-gray-50 hover:border-blue-300 transition-colors"
            >
              {listName}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}
