import { prisma } from "@/lib/prisma";
import {
  createCategoryAction,
  deleteCategoryAction,
} from "@/server/actions/admin";

export default async function AdminCategoriesPage() {
  const rows = await prisma.category.findMany();
  return (
    <div>
      <h1 className="text-2xl font-semibold">Categories</h1>
      <form action={createCategoryAction} className="card mt-4 grid gap-3 sm:grid-cols-2">
        <input className="input" name="name" placeholder="Nombre" required />
        <input className="input" name="emoji" placeholder="Emoji" />
        <input className="input" name="bg" placeholder="#0f766e" defaultValue="#0f766e" />
        <input className="input" name="image" placeholder="URL imagen" />
        <button className="btn-primary sm:col-span-2" type="submit">
          Crear
        </button>
      </form>
      <div className="mt-4 space-y-2">
        {rows.map((c) => (
          <div key={c.id} className="card flex items-center justify-between">
            <span>
              {c.emoji} {c.name}
            </span>
            <form action={deleteCategoryAction}>
              <input type="hidden" name="id" value={c.id} />
              <button className="btn-ghost text-xs" type="submit">
                Eliminar
              </button>
            </form>
          </div>
        ))}
      </div>
    </div>
  );
}