import { Toggle } from "../../components/Toggle";
import { HighlightableField } from "../../components/HighlightableField";
import type { BaseTabProps } from "../types";

export interface TooltipsTabProps extends BaseTabProps {}

export function TooltipsTab({ settings, setSettings }: TooltipsTabProps) {
  return (
    <div className="b3-wvs-space-y-8">
      <h2 className="b3-wvs-text-xl b3-wvs-font-semibold">Tooltips</h2>

      <HighlightableField id="tooltips-enable">
        <Toggle
          checked={!!settings.enable_tooltips}
          onChange={(checked) =>
            setSettings({ ...settings, enable_tooltips: checked })
          }
          label="Enable Tooltips"
          description="Show swatch tooltips on hover"
        />
      </HighlightableField>
    </div>
  );
}