import type { NextPage } from 'next'
import Head from 'next/head'
import AdminLayout from '../../components/AdminLayout'
import { LinkIcon, PlusIcon } from '@heroicons/react/24/outline'

const Webhooks: NextPage = () => {
  return (
    <>
      <Head>
        <title>Webhooks - Hliadka.sk Admin</title>
      </Head>
      <AdminLayout title="Webhooks">
        <div className="px-4 py-6 sm:px-6 lg:px-8">
          <div className="sm:flex sm:items-center">
            <div className="sm:flex-auto">
              <p className="text-sm text-gray-700">
                Správa webhook endpointov pre integrácie s externými službami
              </p>
            </div>
            <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
              <button
                type="button"
                className="btn-primary"
              >
                <PlusIcon className="h-4 w-4 mr-2" />
                Pridať webhook
              </button>
            </div>
          </div>
          
          <div className="mt-8">
            <div className="card p-6">
              <div className="flex items-center mb-4">
                <LinkIcon className="h-6 w-6 text-gray-400 mr-3" />
                <h2 className="text-lg font-medium text-gray-900">Aktívne webhooks</h2>
              </div>
              <p className="text-gray-600">
                Zatiaľ neboli nakonfigurované žiadne webhooks. Kliknite na "Pridať webhook" pre vytvorenie nového.
              </p>
            </div>
          </div>
        </div>
      </AdminLayout>
    </>
  )
}

export default Webhooks