import SettingRow from "@/components/settings/SettingRow";
import { useSetting } from "@/hooks/useSettings";
import { CompareIcon } from "@/lib/icons";
import { cn } from "@/lib/utils";
import { __ } from "@wordpress/i18n";
import { ICONS } from "../constants";

/** The 10 compare icons as pressable tiles. */
const IconSetting = () => {
  const [icon, setIcon] = useSetting("button.icon", "arrows");
  const title = __("Icon", "product-comparison-for-woocommerce");

  return (
    <SettingRow
      title={title}
      description={__(
        "10 choices. The preview updates as you pick.",
        "product-comparison-for-woocommerce",
      )}
    >
      <div
        role="group"
        aria-label={title}
        className="ino:flex ino:flex-wrap ino:gap-1.5"
      >
        {ICONS.map((option) => (
          <button
            key={option.value}
            type="button"
            aria-label={option.label}
            aria-pressed={icon === option.value}
            title={option.label}
            onClick={() => setIcon(option.value)}
            className={cn(
              "ino:flex ino:size-10 ino:items-center ino:justify-center ino:rounded-lg ino:border ino:border-border ino:bg-background ino:text-foreground ino:transition-colors ino:hover:bg-muted ino:focus-visible:ring-3 ino:focus-visible:ring-ring/50 ino:focus-visible:outline-none",
              icon === option.value &&
                "ino:border-primary ino:bg-primary/5 ino:ring-1 ino:ring-primary",
            )}
          >
            <CompareIcon name={option.value} size={18} />
          </button>
        ))}
      </div>
    </SettingRow>
  );
};

export default IconSetting;