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

const Monitoring: NextPage = () => {
  return (
    <>
      <Head>
        <title>Monitoring - Hliadka.sk Admin</title>
      </Head>
      <AdminLayout title="Monitoring">
        <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">
                Monitorovanie výkonnosti systému a zdrojov v reálnom čase
              </p>
            </div>
          </div>
          
          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <div className="card p-6">
              <div className="flex items-center mb-4">
                <CpuChipIcon className="h-8 w-8 text-blue-500 mr-3" />
                <h2 className="text-lg font-medium text-gray-900">CPU Využitie</h2>
              </div>
              <div className="text-3xl font-bold text-blue-600">42%</div>
              <p className="text-sm text-gray-600 mt-1">Aktuálne zaťaženie procesora</p>
            </div>
            
            <div className="card p-6">
              <div className="flex items-center mb-4">
                <ServerStackIcon className="h-8 w-8 text-green-500 mr-3" />
                <h2 className="text-lg font-medium text-gray-900">Pamäť</h2>
              </div>
              <div className="text-3xl font-bold text-green-600">67%</div>
              <p className="text-sm text-gray-600 mt-1">Využitá RAM pamäť</p>
            </div>
            
            <div className="card p-6">
              <div className="flex items-center mb-4">
                <ChartBarIcon className="h-8 w-8 text-purple-500 mr-3" />
                <h2 className="text-lg font-medium text-gray-900">API Requests</h2>
              </div>
              <div className="text-3xl font-bold text-purple-600">1,247</div>
              <p className="text-sm text-gray-600 mt-1">Posledných 24 hodín</p>
            </div>
          </div>
        </div>
      </AdminLayout>
    </>
  )
}

export default Monitoring