import { CheckCircleIcon } from "lucide-react";
import React from "react";
import AppHeader from "src/components/AppHeader";
import { AppStoreApp } from "src/components/connections/SuggestedAppData";
import { NostrWalletConnectIcon } from "src/components/icons/NostrWalletConnectIcon";
import ResponsiveLinkButton from "src/components/ResponsiveLinkButton";
import { Badge } from "src/components/ui/badge";
import { useAppsForAppStoreApp } from "src/hooks/useApps";

// TODO: remove once new connection wizard is added
export function AppStoreDetailHeader({
  appStoreApp,
  contentRight,
}: {
  appStoreApp: AppStoreApp;
  contentRight?: React.ReactNode | null;
}) {
  const connectedApps = useAppsForAppStoreApp(appStoreApp);
  if (!connectedApps) {
    return null;
  }

  return (
    <>
      <AppHeader
        pageTitle={appStoreApp.title}
        icon={
          <img
            src={appStoreApp.logo}
            alt="logo"
            className="inline rounded-lg w-14 h-14"
          />
        }
        title={
          <div className="flex items-center gap-2">
            {appStoreApp.title}
            {!!connectedApps.length && (
              <Badge variant="positive" className="flex items-center gap-1">
                <CheckCircleIcon className="w-3 h-3" />{" "}
                {connectedApps.length > 1
                  ? `${connectedApps.length} Connections`
                  : "Connected"}
              </Badge>
            )}
          </div>
        }
        description={appStoreApp.description}
        contentRight={
          contentRight !== undefined ? (
            contentRight
          ) : (
            <ResponsiveLinkButton
              to={`/apps/new?app=${appStoreApp.id}`}
              icon={NostrWalletConnectIcon}
              text={`Connect to ${appStoreApp.title}`}
            />
          )
        }
      />
    </>
  );
}