import React from "react";

const topUsers = [
  { email: "ian.gomez@example.com", visits: 6950 },
  { email: "admin@krow.com", visits: 193 },
  { email: "paula.orte@example.com", visits: 81 },
  { email: "test.user@example.com", visits: 50 },
];

const topPages = [
  { name: "VendorManagement", visits: 718 },
  { name: "Dashboard", visits: 600 },
  { name: "unknown", visits: 587 },
  { name: "ClientDashboard", visits: 475 },
  { name: "Events", visits: 456 },
];

export default function Analytics() {
  return (
    <div>
      <h1 className="text-3xl font-bold text-slate-800">Analytics</h1>
      <p className="mt-2 text-base text-slate-600">
        An overview of your application's data.
      </p>

      <div className="mt-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white shadow-lg rounded-2xl p-6">
            <h3 className="text-lg font-medium text-gray-900">Total Unique Users</h3>
            <p className="mt-2 text-4xl font-bold text-blue-600">3</p>
          </div>
        </div>
      </div>

      <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <h3 className="text-xl font-semibold text-gray-900">Top Users</h3>
          <ul className="mt-4 space-y-4">
            {topUsers.map((user) => (
              <li key={user.email} className="bg-white shadow-lg rounded-2xl p-4">
                <p className="font-semibold text-slate-800">{user.email}</p>
                <p className="text-slate-500">{user.visits.toLocaleString()} visits</p>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h3 className="text-xl font-semibold text-gray-900">Top Pages</h3>
          <ul className="mt-4 space-y-4">
            {topPages.map((page) => (
              <li key={page.name} className="bg-white shadow-lg rounded-2xl p-4 flex justify-between items-center">
                <p className="font-semibold text-slate-800">{page.name}</p>
                <p className="text-slate-500 font-medium">{page.visits.toLocaleString()}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}