import React from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "@/hooks/useTranslation";

/**
 * Whether this survey's views and completed responses will reach the company's Meta Pixel, shown at
 * release time - which is when a company starts paying for traffic and needs to know it is measured.
 * The pixel itself is set once for the company, in its settings.
 */
export const MetaPixelStatus = ({ company }) => {
  const { t } = useTranslation();
  // A survey with no company, such as an admin's quick survey, has no pixel to report to.
  if (!company?.id) return null;

  const active = Boolean(company.metaPixelId);

  return (
      <div
          role="status"
          className={`w-full flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-3 text-sm ${
              active ? "border-green-200 bg-green-50 text-green-800" : "border-gray-200 bg-gray-50 text-gray-700"
          }`}
      >
        <span className="flex flex-col gap-0.5">
          <span>
            {active
                ? t("surveyBuilder.step4.metaPixelActive", { pixelId: company.metaPixelId })
                : t("surveyBuilder.step4.metaPixelNotConfigured")}
          </span>
          {active ? (
              <span className="text-xs opacity-80">
                {company.metaCapiEnabled
                    ? t("surveyBuilder.step4.metaCapiOn")
                    : t("surveyBuilder.step4.metaCapiOff")}
              </span>
          ) : null}
        </span>
        <Link to="/account" className="font-semibold underline underline-offset-2">
          {active ? t("surveyBuilder.step4.metaPixelManage") : t("surveyBuilder.step4.metaPixelSetUp")}
        </Link>
      </div>
  );
};