import React from "react";

export default function Author({ url, avatar, name, variant = "grid" }) {
  const isListView = variant === "list";
  
  return (
    <a
      href={url || "javascript:void(0);"}
      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"
      }`}
      target={url && url.startsWith("http") ? "_blank" : undefined}
      rel={url && url.startsWith("http") ? "noopener noreferrer" : undefined}
    >
      <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>
    </a>
  );
}