import type { Route } from './+types'

import { useLoaderData } from 'react-router'

import { DataTable } from '@/components/data-table'
import { authMiddleware } from '@/middleware/auth'
import { columns, type Webhook } from './columns'

export const middleware: Route.MiddlewareFunction[] = [authMiddleware]

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Webhooks' }]
}

export async function loader(): Promise<Webhook[]> {
  return []
}

export default function Page() {
  const data = useLoaderData() as Webhook[]

  return (
    <>
      <div className="space-y-0.5 mb-8">
        <h1 className="text-2xl font-bold tracking-tight">Webhooks</h1>
        <p className="text-muted-foreground">
          Adicione webhooks para sua organização.
        </p>
      </div>

      <DataTable columns={columns} data={data} />
    </>
  )
}