import { Toggle } from "@/components/ui/toggle";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";
import { SHARE_NETWORKS } from "../constants";
import NetworkLogo from "./NetworkLogo";

/**
 * Sharing › Share via: which networks the Share menu lists (each a plain
 * share link, no third-party scripts). None = Share copies the link.
 */
const ShareNetworksSetting = () => {
  const [networks, setNetworks] = useSetting("share.networks", {});
  const toggle = (key, on) => setNetworks({ ...networks, [key]: on });

  return (
    <div className="ino:border-t ino:border-border/70 ino:py-4">
      <div
        id="pcfw-share-networks"
        className="ino:text-sm ino:font-medium ino:text-foreground"
      >
        {__("Share via", "product-comparison-for-woocommerce")}
      </div>
      <p className="ino:mt-0.5 ino:mb-3 ino:text-[13px] ino:leading-snug ino:text-muted-foreground">
        {__(
          "Shown in the Share menu on computers, with Copy link. Phones open their own share sheet. Plain links, no tracking scripts.",
          "product-comparison-for-woocommerce",
        )}
      </p>
      <div
        role="group"
        aria-labelledby="pcfw-share-networks"
        className="ino:flex ino:flex-wrap ino:gap-2"
      >
        {SHARE_NETWORKS.map(({ key, label }) => (
          <Toggle
            key={key}
            variant="outline"
            size="sm"
            pressed={Boolean(networks?.[key])}
            onPressedChange={(on) => toggle(key, on)}
            className="ino:gap-1.5 ino:text-muted-foreground ino:[&_svg]:opacity-45 ino:[&_svg]:grayscale ino:aria-pressed:border-primary ino:aria-pressed:bg-primary/5 ino:aria-pressed:text-foreground ino:aria-pressed:[&_svg]:opacity-100 ino:aria-pressed:[&_svg]:grayscale-0"
          >
            <NetworkLogo name={key} />
            {label}
          </Toggle>
        ))}
      </div>
    </div>
  );
};

export default ShareNetworksSetting;