import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

export function ActivityPage() {
  return (
    <div className="space-y-6">
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>Recent Actions</CardTitle>
            <CardDescription>Your recent activity</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span>Logged in via Google</span>
                <span className="text-muted-foreground">2 minutes ago</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Updated profile</span>
                <span className="text-muted-foreground">1 hour ago</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Changed settings</span>
                <span className="text-muted-foreground">2 hours ago</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>System Events</CardTitle>
            <CardDescription>System-wide activity</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span>New user registered</span>
                <span className="text-muted-foreground">15 minutes ago</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Database backup completed</span>
                <span className="text-muted-foreground">1 hour ago</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>System update applied</span>
                <span className="text-muted-foreground">3 hours ago</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Statistics</CardTitle>
            <CardDescription>Activity overview</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between text-sm">
                <span>Total Sessions</span>
                <span className="font-medium">42</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>This Week</span>
                <span className="font-medium">12</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span>Average Duration</span>
                <span className="font-medium">1.5h</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}