'use client';

import {
  UserPlus,
  CreditCard,
  Package,
  Clock,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface ActivityItem {
  id: number;
  type: 'user' | 'subscription' | 'package';
  title: string;
  description: string;
  time: string;
}

const activities: ActivityItem[] = [
  {
    id: 1,
    type: 'user',
    title: 'New User Registered',
    description: 'A new user has joined the platform',
    time: '2 min ago',
  },
  {
    id: 2,
    type: 'subscription',
    title: 'Subscription Activated',
    description: 'Professional plan subscription started',
    time: '15 min ago',
  },
  {
    id: 3,
    type: 'package',
    title: 'Package Updated',
    description: 'Enterprise package pricing adjusted',
    time: '1 hour ago',
  },
  {
    id: 4,
    type: 'user',
    title: 'User Profile Updated',
    description: 'Account settings modified by admin',
    time: '2 hours ago',
  },
  {
    id: 5,
    type: 'subscription',
    title: 'Subscription Renewed',
    description: 'Basic plan auto-renewed',
    time: '3 hours ago',
  },
  {
    id: 6,
    type: 'package',
    title: 'New Package Created',
    description: 'Starter plan added to offerings',
    time: '5 hours ago',
  },
];

const iconMap = {
  user: UserPlus,
  subscription: CreditCard,
  package: Package,
};

const colorMap = {
  user: 'bg-blue-50 text-blue-600 dark:bg-blue-950/30',
  subscription: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-950/30',
  package: 'bg-violet-50 text-violet-600 dark:bg-violet-950/30',
};

export function RecentActivity() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-semibold">Recent Activity</CardTitle>
          <Badge variant="secondary" className="text-xs font-normal gap-1">
            <Clock className="h-3 w-3" />
            Live
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="pt-0">
        <div className="space-y-1">
          {activities.map((activity) => {
            const Icon = iconMap[activity.type];
            return (
              <div
                key={activity.id}
                className="flex items-start gap-3 rounded-lg p-2.5 transition-colors hover:bg-muted/50"
              >
                <div className={`rounded-lg p-2 ${colorMap[activity.type]}`}>
                  <Icon className="h-4 w-4" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium">{activity.title}</p>
                  <p className="text-xs text-muted-foreground truncate">
                    {activity.description}
                  </p>
                </div>
                <span className="text-xs text-muted-foreground whitespace-nowrap">
                  {activity.time}
                </span>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}