import { Activity } from 'lucide-react';
import { EmptyTab } from './shared';
import type { ActivityEntry } from './types';

export default function ActivityTab({
    activity,
}: {
    activity: ActivityEntry[];
}) {
    return (
        <div className="bg-card border-border rounded-xl border p-6">
            {activity.length > 0 ? (
                <div className="space-y-4">
                    {activity.map((entry, i) => (
                        <div key={i} className="flex items-start gap-3">
                            <Activity
                                className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${
                                    entry.severity === 'critical' ||
                                    entry.severity === 'warning'
                                        ? 'text-amber-500'
                                        : 'text-muted-foreground'
                                }`}
                            />
                            <div className="min-w-0">
                                <p className="text-foreground/85 text-xs font-medium">
                                    {entry.event}
                                    {entry.actor_name && (
                                        <span className="text-muted-foreground font-normal">
                                            {' '}
                                            — {entry.actor_name}
                                        </span>
                                    )}
                                </p>
                                <p className="text-muted-foreground text-[11px]">
                                    {entry.time}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
            ) : (
                <EmptyTab text="No recorded activity for this tenant." />
            )}
        </div>
    );
}