import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { __ } from "@wordpress/i18n";
import IconSetting from "../../buttons/components/IconSetting";
import { STYLES } from "../../buttons/constants";

/** Wizard step 3: button style and icon, theme styles on or off. */
const LookStep = () => (
  <div className="ino:rounded-xl ino:border ino:border-border ino:bg-card ino:px-5 ino:pb-1.5">
    <ChoiceSetting
      path="button.style"
      options={STYLES}
      title={__("Button style", "product-comparison-for-woocommerce")}
    />
    <IconSetting />
    <SwitchSetting
      source="design"
      path="button.inherit_theme"
      title={__(
        "Use my theme’s button style",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "Fine-tune colors and shape later in Buttons › Button style.",
        "product-comparison-for-woocommerce",
      )}
    />
    <SwitchSetting
      source="design"
      path="inherit_theme"
      title={__(
        "Use my theme’s table style",
        "product-comparison-for-woocommerce",
      )}
      description={__(
        "More options in the Design tab.",
        "product-comparison-for-woocommerce",
      )}
    />
  </div>
);

export default LookStep;