import { Delete } from "lucide-react";
import { deleteCountry } from "~/server/actions/deleteCountry";
import { db } from "~/server/db";

export default async function AllCountries() {
  const countries = await db.query.countries.findMany();
  return (
    <div className="pt-4">
      <h1 className="text-2xl">All Countries:</h1>
      {countries.map((country) => (
        <div key={country.id} className="flex gap-1">
          <p>{country.name}</p>
          <form action={deleteCountry.bind(null, country.id)}>
            <button>
              <Delete />
            </button>
          </form>
        </div>
      ))}
    </div>
  );
}