import { Card } from '@/components/ui/Card';

const peers = [
  [
    '198.19.254.1',
    'Q2o9...h8jK',
    '2m ago',
    '1.2 MB',
  ],
  [
    '198.19.254.2',
    'P9xL...a7Bc',
    '3m ago',
    '532 KB',
  ],
  [
    '198.19.254.3',
    'J4kM...z9Xp',
    '1m ago',
    '2.1 MB',
  ],
];

export function VpnPeersTable() {
  return (
    <Card className="h-full">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold text-white">
          VPN Peers
        </h3>

        <span className="rounded-full bg-green-500/10 px-3 py-1 text-xs text-green-300">
          3 Active
        </span>
      </div>

      <div className="mt-4 overflow-hidden rounded-xl border border-white/10">
        <table className="w-full text-sm">
          <thead className="bg-slate-900/80 text-left text-slate-400">
            <tr>
              <th className="px-4 py-3">
                VPN IP
              </th>

              <th className="px-4 py-3">
                Public Key
              </th>

              <th className="px-4 py-3">
                Last Handshake
              </th>

              <th className="px-4 py-3 text-right">
                Transfer
              </th>
            </tr>
          </thead>

          <tbody>
            {peers.map((peer) => (
              <tr
                key={peer[0]}
                className="border-t border-white/10 hover:bg-white/[0.03]"
              >
                <td className="px-4 py-3 text-green-300">
                  ● {peer[0]}
                </td>

                <td className="px-4 py-3 font-mono text-slate-300">
                  {peer[1]}
                </td>

                <td className="px-4 py-3 text-slate-400">
                  {peer[2]}
                </td>

                <td className="px-4 py-3 text-right text-slate-300">
                  {peer[3]}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}