// ui
import { ProfileEmptyState } from "components/ui";
// image
import emptyUsers from "public/empty-state/empty_users.svg";

type Props = {
  users: {
    avatar: string | null;
    display_name: string | null;
    firstName: string;
    lastName: string;
    count: number;
    id: string;
  }[];
  title: string;
  emptyStateMessage: string;
  workspaceSlug: string;
};

export const AnalyticsLeaderboard: React.FC<Props> = ({
  users,
  title,
  emptyStateMessage,
  workspaceSlug,
}) => (
  <div className="p-3 border border-custom-border-200 rounded-[10px]">
    <h6 className="text-base font-medium">{title}</h6>
    {users.length > 0 ? (
      <div className="mt-3 space-y-3">
        {users.map((user) => (
          <a
            key={user.display_name ?? "None"}
            href={`/${workspaceSlug}/profile/${user.id}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-start justify-between gap-4 text-xs"
          >
            <div className="flex items-center gap-2">
              {user && user.avatar && user.avatar !== "" ? (
                <div className="relative rounded-full h-4 w-4 flex-shrink-0">
                  <img
                    src={user.avatar}
                    className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
                    alt={user.display_name ?? "None"}
                  />
                </div>
              ) : (
                <div className="grid place-items-center flex-shrink-0 rounded-full bg-gray-700 text-[11px] capitalize text-white h-4 w-4">
                  {user.display_name !== "" ? user?.display_name?.[0] : "?"}
                </div>
              )}
              <span className="break-words text-custom-text-200">
                {user.display_name !== "" ? `${user.display_name}` : "No assignee"}
              </span>
            </div>
            <span className="flex-shrink-0">{user.count}</span>
          </a>
        ))}
      </div>
    ) : (
      <div className="px-7 py-4">
        <ProfileEmptyState title="No Data yet" description={emptyStateMessage} image={emptyUsers} />
      </div>
    )}
  </div>
);