import React from "react";
import { cn } from "@/lib/utils";
import { 
  Bell, 
  Package, 
  MapPin, 
  CreditCard, 
  User, 
  Info,
  CheckCircle2,
  Clock
} from "lucide-react";

export type ActivityType = "order" | "address" | "payment" | "profile" | "news" | "system";

export interface ActivityItem {
  id: string | number;
  type: ActivityType;
  title: string;
  description: string;
  date: string;
  status?: "pending" | "completed" | "info";
}

const activityIcons: Record<ActivityType, any> = {
  order: Package,
  address: MapPin,
  payment: CreditCard,
  profile: User,
  news: Bell,
  system: Info,
};

const ActivityFeed = ({ items }: { items: ActivityItem[] }) => {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold tracking-tight">Deine Aktivitäten</h3>
        <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full border border-border/50">
          Letzte 30 Tage
        </span>
      </div>

      <div className="relative space-y-4 before:absolute before:inset-y-0 before:left-4 before:w-px before:bg-border/60">
        {items.map((item, index) => {
          const Icon = activityIcons[item.type] || Info;
          
          return (
            <div key={item.id} className="relative pl-10 animate-in fade-in slide-in-from-left-2 duration-300" style={{ animationDelay: `${index * 50}ms` }}>
              {/* Dot and Icon */}
              <div className="absolute left-0 top-0.5 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card shadow-sm z-10">
                <Icon className="h-4 w-4 text-primary" />
              </div>

              {/* Content */}
              <div className="flex flex-col gap-1 p-4 rounded-lg border border-border/40 bg-muted/20 hover:bg-muted/40 transition-colors">
                <div className="flex items-center justify-between gap-2">
                  <h4 className="text-sm font-semibold leading-none">{item.title}</h4>
                  <div className="flex items-center gap-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                    <Clock className="h-3 w-3" />
                    {item.date}
                  </div>
                </div>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {item.description}
                </p>
                
                {item.status && (
                  <div className="mt-2 flex items-center gap-1.5">
                     <span className={cn(
                       "inline-flex h-1.5 w-1.5 rounded-full",
                       item.status === "completed" ? "bg-green-500" : 
                       item.status === "pending" ? "bg-amber-500" : "bg-blue-500"
                     )} />
                     <span className="text-[11px] font-medium text-muted-foreground capitalize">
                       {item.status}
                     </span>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ActivityFeed;