import React from "react";
import { safeHref } from "../../utils/helpers";

export default function Author({ url, avatar, name, variant = "grid" }) {
  const isListView = variant === "list";

  // Provider author URLs are untrusted, and favourites replay them from
  // localStorage, so anything that is not http(s) renders as plain text.
  const href = safeHref(url);

  const className = `flex items-center gap-2.5 no-underline text-base font-medium min-w-0 ${
    isListView ? "text-gray-600 mt-1" : "text-white mt-3"
  }`;

  const content = (
    <>
      <img
        src={avatar}
        alt={name}
        className={`rounded-full align-middle object-cover shrink-0 ${
          isListView
            ? "w-5 h-5 border border-gray-300"
            : "w-[30px] h-[30px] border-2 border-white p-0.5"
        }`}
      />
      <span className={`whitespace-nowrap overflow-hidden text-ellipsis min-w-0 ${
        isListView ? "text-xs" : "max-w-[120px]"
      }`}>
        {name}
      </span>
    </>
  );

  if (!href) {
    return <span className={className}>{content}</span>;
  }

  return (
    <a
      href={href}
      className={className}
      target="_blank"
      rel="noopener noreferrer"
    >
      {content}
    </a>
  );
}