'use client';
import HRLayout from '../../../components/HRLayout';
import AdminContent from './AdminContent';
import { useAuth } from '../../../lib/authContext';

export default function AdminPage() {
  const { user } = useAuth();

  if (user?.role !== 'admin') {
    return (
      <HRLayout title="System Administration" breadcrumb="HR">
        <div className="flex flex-col items-center justify-center min-h-96">
          <div className="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center mb-4">
            <i className="ri-lock-2-line text-4xl text-red-400"></i>
          </div>
          <h2 className="text-xl font-bold text-gray-800 mb-2">Access Restricted</h2>
          <p className="text-gray-500 text-sm text-center max-w-xs">System Administration is only accessible to HR Super Administrators.</p>
        </div>
      </HRLayout>
    );
  }

  return (
    <HRLayout title="System Administration" breadcrumb="HR Admin">
      <AdminContent />
    </HRLayout>
  );
}