import { type Component } from "solid-js";
import { type PackageData } from "~/types.js";
import { SizeBadgePill } from "./SizeBadge.js";
import { StageBadgePill } from "./StageBadge.js";
import { VersionBadgePill } from "./VersionBadge.js";

const sizeShield = "https://img.shields.io/bundlephobia/minzip/";
// const bundlephobiaURL = "https://bundlephobia.com/package/";
const npmShield = "https://img.shields.io/npm/v/";
// const stageShieldBaseURL =
//   "https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-"; // add "<stage>.json" after
// const stageShieldLink =
//   "https://github.com/solidjs-community/solid-primitives#contribution-process";
// const githubRepo = "https://github.com/solidjs-community/solid-primitives";

export const getSizeShield = (name: string) => `${sizeShield}${name}.json`;
export const getNPMShield = (name: string) => `${npmShield}${name}.json`;

const InfoBar: Component<{
  name: string;
  version: string | undefined;
  packageName: string;
  packageSize: PackageData["packageSize"] | undefined;
  stage: PackageData["stage"] | undefined;
  primitives: PackageData["primitives"] | undefined;
}> = props => {
  // const githubRepoPrimitve = () => `${githubRepo}/tree/main/packages/${props.name}`;
  return (
    <div class="flex flex-wrap gap-2">
      <SizeBadgePill
        // href={`${bundlephobiaURL}/${props.packageName}`}
        name={props.name}
        packageSize={props.packageSize || undefined}
        primitives={props.primitives || []}
      />
      <VersionBadgePill name={props.name} version={props.version} />
      <StageBadgePill value={props.stage} />
    </div>
  );
};

export default InfoBar;
