import { Icon, type IconName } from '@/components/marketing/icons';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { EmptyState } from '@/components/ui/empty-state';
import { cn } from '@/lib/utils';

export type ActivityItem = {
  id: string;
  title: string;
  detail?: string;
  whenLabel: string;
  icon: IconName;
};

export function ActivityFeed({ items }: { items: ActivityItem[] }) {
  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle>Recent Activity</CardTitle>
      </CardHeader>
      <CardContent>
        {items.length === 0 ? (
          <EmptyState
            className="border-0 bg-transparent px-0 py-4 shadow-none"
            icon={<Icon name="spark" size={22} />}
            title="Quiet so far"
            description="Order, offer, and store activity will show up here."
          />
        ) : (
          <ol className="space-y-0">
            {items.map((item, index) => (
              <li key={item.id} className="relative flex gap-3 pb-4 last:pb-0">
                {index < items.length - 1 && (
                  <span className="absolute top-9 bottom-0 left-[1.05rem] w-px bg-border" aria-hidden="true" />
                )}
                <span className={cn('relative z-[1] flex size-8 shrink-0 items-center justify-center rounded-full bg-primary-soft text-primary')}>
                  <Icon name={item.icon} size={15} />
                </span>
                <div className="min-w-0 pt-0.5">
                  <p className="text-sm font-semibold text-navy">{item.title}</p>
                  {item.detail && <p className="mt-0.5 truncate text-xs text-muted-foreground">{item.detail}</p>}
                  <p className="mt-1 text-[11px] text-muted-foreground">{item.whenLabel}</p>
                </div>
              </li>
            ))}
          </ol>
        )}
      </CardContent>
    </Card>
  );
}