import { pluginOverviewUrl } from "@getpaseo/protocol/plugin-overview";
import { useLocale } from "~/i18n";
import { type Plugin, pluginListing } from "./registry";

const SIZE_CLASS = {
  xs: "h-6 w-6 rounded-md text-xs",
  sm: "h-9 w-9 rounded-lg text-sm",
  lg: "h-14 w-14 rounded-xl text-xl",
} as const;

/** PNG icon with a letter tile when no icon is published. */
export function PluginTile({ plugin, size }: { plugin: Plugin; size: keyof typeof SIZE_CLASS }) {
  const locale = useLocale();
  return (
    <div
      aria-hidden
      className={`flex flex-shrink-0 items-center justify-center border border-white/10 bg-white/[0.06] font-medium text-white/80 ${SIZE_CLASS[size]}`}
    >
      {pluginOverviewUrl(plugin.icon) ? (
        <img src={plugin.icon} alt="" className="h-full w-full rounded-[inherit] object-cover" />
      ) : (
        pluginListing(plugin, locale).name.charAt(0).toUpperCase()
      )}
    </div>
  );
}