// 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> = (props) => {
  const { users, title, emptyStateMessage, workspaceSlug } = props;

  return (
    <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>
  );
};