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

const rows = [
  'Peer added 198.19.254.3',
  'Peer updated 198.19.254.2',
  'Backup created wg0.conf.bak',
  'Health check all systems operational',
];

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

        <span className="text-xs text-slate-500">
          Live Feed
        </span>
      </div>

      <div className="mt-4 divide-y divide-white/10">
        {rows.map((row, index) => (
          <div
            key={row}
            className="flex items-center justify-between py-3 text-sm"
          >
            <span className="text-slate-200">
              {row}
            </span>

            <span className="text-xs text-slate-500">
              {index
                ? `${index * 15}m ago`
                : '2m ago'}
            </span>
          </div>
        ))}
      </div>
    </Card>
  );
}