import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import type { SubscriptionInfo } from "@/client/model";

interface FollowerCardListProps {
  users: SubscriptionInfo[];
}

export function FollowerCardList({ users }: FollowerCardListProps) {
  if (users.length === 0) {
    return (
      <div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
        <p>No followers yet</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {users.map((user) => (
        <div
          key={user.user_uid}
          className="flex items-center gap-3 p-4 rounded-lg border transition-colors"
          style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}
        >
          <Avatar className="w-12 h-12 rounded-lg">
            <AvatarFallback className="rounded-lg" style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
              U
            </AvatarFallback>
          </Avatar>

          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold truncate" style={{ color: "var(--text-primary)" }}>
              {user.user_uid.slice(0, 8)}...
            </p>
            <p className="text-xs truncate" style={{ color: "var(--text-muted)" }}>
              {new Date(user.subscribed_at).toLocaleDateString()}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}