<script setup lang="ts">
import type { TableColumn } from "@nuxt/ui";

const props = defineProps<{
  data: Link[];
  status: "pending" | "idle" | "success" | "error";
}>();

const emit = defineEmits<{
  edit: [link: Link];
  delete: [link: Link];
}>();

const UButton = resolveComponent("UButton");

const columns: TableColumn<Link>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "path", header: "Path" },
  {
    accessorKey: "url",
    header: "URL",
    cell: ({ row }) =>
      h("a", {
          href: row.original.url,
          target: "_blank",
          class: "text-primary hover:underline truncate max-w-xs block",
        },
        row.original.url,
      ),
  },
  {
    id: "actions",
    cell: ({ row }) =>
      h("div", { class: "flex justify-end gap-1" }, [
        h(UButton, {
          icon: "i-lucide-pencil",
          variant: "ghost",
          size: "sm",
          onClick: () => emit("edit", row.original),
        }),
        h(UButton, {
          icon: "i-lucide-trash-2",
          variant: "ghost",
          size: "sm",
          color: "error",
          onClick: () => emit("delete", row.original),
        }),
      ]),
  },
];
</script>

<template>
  <UTable
    :data="data"
    :columns="columns"
    :loading="status === 'pending' || status === 'idle'"
  >
    <template #empty>
      {{ status === "pending" || status === "idle" ? "Loading..." : "No data" }}
    </template>
  </UTable>
</template>
