const imgEllipse140 = "https://www.figma.com/api/mcp/asset/57ab6a23-3e81-4220-a788-ef7294a6bf6d";
const imgEllipse141 = "https://www.figma.com/api/mcp/asset/7e87a6fc-402e-4e04-b1e9-636ac5c35fee";
const imgUnion = "https://www.figma.com/api/mcp/asset/6b3ebca2-493d-4773-b4a0-06c76ab82aea";
const imgEllipse142 = "https://www.figma.com/api/mcp/asset/876577f7-4a0c-453e-9db9-f31347557eb0";
const imgUnion1 = "https://www.figma.com/api/mcp/asset/d52e5262-6433-4ff4-9b8b-14246aa93010";
const imgEllipse143 = "https://www.figma.com/api/mcp/asset/6d2448f8-8dba-430b-bd8e-cf654acacf15";
const imgUnion2 = "https://www.figma.com/api/mcp/asset/ce79c2e7-e4ca-4361-a110-8a75883b8f32";
const imgRectangle535 = "https://www.figma.com/api/mcp/asset/2be3686b-9a1e-45a8-8794-c47e837c5679";

type SwitchProps = {
  className?: string;
  darkTheme?: boolean;
  enable?: boolean;
  loading?: boolean;
  status?: "live" | "off" | "on";
};

export default function Switch({ className, darkTheme = true, enable = true, loading = false, status = "on" }: SwitchProps) {
  const isDarkThemeAndLiveAndEnableAndNotLoading = darkTheme && status === "live" && enable && !loading;
  const isDarkThemeAndLiveAndNotEnableAndLoading = darkTheme && status === "live" && !enable && loading;
  const isDarkThemeAndLiveAndNotEnableAndNotLoading = darkTheme && status === "live" && !enable && !loading;
  const isDarkThemeAndOffAndEnableAndNotLoading = darkTheme && status === "off" && enable && !loading;
  const isDarkThemeAndOffAndNotEnableAndLoading = darkTheme && status === "off" && !enable && loading;
  const isDarkThemeAndOffAndNotEnableAndNotLoading = darkTheme && status === "off" && !enable && !loading;
  const isDarkThemeAndOnAndNotEnableAndLoading = darkTheme && status === "on" && !enable && loading;
  const isDarkThemeAndOnAndNotEnableAndNotLoading = darkTheme && status === "on" && !enable && !loading;
  const isLiveAndEnableAndNotLoading = status === "live" && enable && !loading;
  const isNotDarkThemeAndLiveAndEnableAndNotLoading = !darkTheme && status === "live" && enable && !loading;
  const isNotDarkThemeAndLiveAndNotEnableAndLoading = !darkTheme && status === "live" && !enable && loading;
  const isNotDarkThemeAndLiveAndNotEnableAndNotLoading = !darkTheme && status === "live" && !enable && !loading;
  const isNotDarkThemeAndOffAndEnableAndNotLoading = !darkTheme && status === "off" && enable && !loading;
  const isNotDarkThemeAndOffAndNotEnableAndLoading = !darkTheme && status === "off" && !enable && loading;
  const isNotDarkThemeAndOffAndNotEnableAndNotLoading = !darkTheme && status === "off" && !enable && !loading;
  const isNotDarkThemeAndOnAndEnableAndNotLoading = !darkTheme && status === "on" && enable && !loading;
  const isNotDarkThemeAndOnAndNotEnableAndLoading = !darkTheme && status === "on" && !enable && loading;
  const isNotDarkThemeAndOnAndNotEnableAndNotLoading = !darkTheme && status === "on" && !enable && !loading;
  return (
    <div className={className || `h-[20px] relative w-[40px] ${isNotDarkThemeAndOffAndEnableAndNotLoading ? String.raw`bg-[var(--ux\/grey\/grey-6-\#9e9e9e,#9e9e9e)] rounded-[100px]` : isDarkThemeAndOffAndEnableAndNotLoading ? String.raw`bg-[var(--ux\/grey\/grey-8-\#595959,#595959)] rounded-[100px]` : isNotDarkThemeAndOnAndEnableAndNotLoading ? String.raw`bg-[var(--ux\/brand\/brand,#299f45)] rounded-[100px]` : status === "live" && !enable ? "opacity-40" : (status === "on" && !enable) || isLiveAndEnableAndNotLoading || (status === "off" && !enable) ? "" : String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] rounded-[100px]`}`} id={isNotDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18086" : isNotDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18212" : isNotDarkThemeAndOffAndEnableAndNotLoading ? "node-337_18085" : isDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18081" : isDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18210" : isDarkThemeAndOffAndEnableAndNotLoading ? "node-337_18082" : isNotDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18084" : isDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18076" : isNotDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18246" : isNotDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18247" : isNotDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18250" : isNotDarkThemeAndOnAndNotEnableAndLoading ? "node-337_18209" : isNotDarkThemeAndOnAndEnableAndNotLoading ? "node-337_18083" : isDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18245" : isDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18248" : isDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18249" : isDarkThemeAndOnAndNotEnableAndLoading ? "node-337_18211" : "node-337_18075"}>
      <div className={`absolute ${isNotDarkThemeAndOffAndNotEnableAndNotLoading ? "bottom-0 left-0 top-0 w-[40px]" : isNotDarkThemeAndOffAndNotEnableAndLoading ? String.raw`bg-[var(--ux\/grey\/grey-5-\#cccccc,#ccc)] bottom-0 left-0 rounded-[100px] top-0 w-[40px]` : darkTheme && status === "off" && !enable ? String.raw`bg-[var(--ux\/grey\/grey-9-\#434343,#434343)] bottom-0 left-0 rounded-[100px] top-0 w-[40px]` : status === "off" && enable && !loading ? "aspect-[16/16] bottom-[10%] left-[2px] top-[10%]" : !darkTheme && status === "live" && (!loading || (!enable && loading)) ? String.raw`bg-[var(--ux\/red\/default,#dc2717)] bottom-0 right-0 rounded-[100px] top-0 w-[40px]` : !darkTheme && status === "on" && !enable ? String.raw`bg-[var(--ux\/brand\/disable,#8fcc9d)] bottom-0 right-0 rounded-[100px] top-0 w-[40px]` : darkTheme && status === "live" && (!loading || (!enable && loading)) ? String.raw`bg-[var(--ux\/red\/default,#ea4233)] bottom-0 right-0 rounded-[100px] top-0 w-[40px]` : darkTheme && status === "on" && !enable ? String.raw`bg-[var(--ux\/brand\/disable,#1a652c)] bottom-0 right-0 rounded-[100px] top-0 w-[40px]` : "aspect-[16/16] bottom-[10%] right-[2px] top-[10%]"}`} id={isNotDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18022" : isNotDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18135" : isNotDarkThemeAndOffAndEnableAndNotLoading ? "node-337_18017" : isDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18054" : isDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18132" : isDarkThemeAndOffAndEnableAndNotLoading ? "node-337_18005" : isNotDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18013" : isDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18007" : isNotDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18231" : isNotDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18111" : isNotDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18102" : isNotDarkThemeAndOnAndNotEnableAndLoading ? "node-337_18129" : isNotDarkThemeAndOnAndEnableAndNotLoading ? "node-337_18029" : isDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18228" : isDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18108" : isDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18099" : isDarkThemeAndOnAndNotEnableAndLoading ? "node-337_18126" : "node-337_18011"}>
        {!loading && ((status === "on" && enable) || (status === "off" && enable) || (!darkTheme && status === "off" && !enable)) && <img alt="" className="absolute block inset-0 max-w-none size-full" src={isNotDarkThemeAndOffAndNotEnableAndNotLoading ? imgRectangle535 : imgEllipse140} />}
      </div>
      {(!enable || isLiveAndEnableAndNotLoading) && (
        <div className={`absolute ${isNotDarkThemeAndOffAndNotEnableAndNotLoading ? "bottom-[10%] left-[2px] top-[10%] w-[16px]" : status === "off" && !enable && (loading || (darkTheme && !loading)) ? "-translate-y-1/2 left-[2px] size-[16px] top-1/2" : !loading && ((darkTheme && status === "live") || (!darkTheme && status === "on" && !enable)) ? "bottom-[10%] right-[2px] top-[10%] w-[16px]" : "-translate-y-1/2 right-[2px] size-[16px] top-1/2"}`} id={isNotDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18023" : isNotDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18136" : isDarkThemeAndOffAndNotEnableAndNotLoading ? "node-337_18055" : isDarkThemeAndOffAndNotEnableAndLoading ? "node-337_18133" : isNotDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18014" : isDarkThemeAndOnAndNotEnableAndNotLoading ? "node-337_18008" : isNotDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18232" : isNotDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18112" : isNotDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18103" : isNotDarkThemeAndOnAndNotEnableAndLoading ? "node-337_18130" : isDarkThemeAndLiveAndNotEnableAndLoading ? "node-337_18229" : isDarkThemeAndLiveAndNotEnableAndNotLoading ? "node-337_18109" : isDarkThemeAndLiveAndEnableAndNotLoading ? "node-337_18100" : "node-337_18127"}>
          <img alt="" className="absolute block inset-0 max-w-none size-full" src={!darkTheme && !enable && ["on", "off"].includes(status) ? imgEllipse143 : status === "live" && (!loading || (!enable && loading)) ? imgEllipse142 : imgEllipse141} />
        </div>
      )}
      {!enable && loading && (
        <div className={`-translate-y-1/2 absolute size-[12px] top-1/2 ${status === "off" && !enable && loading ? "left-[4px]" : "right-[4px]"}`} id={isNotDarkThemeAndOffAndNotEnableAndLoading ? "node-1448_45773" : isDarkThemeAndOffAndNotEnableAndLoading ? "node-1448_45758" : isNotDarkThemeAndLiveAndNotEnableAndLoading ? "node-1448_45788" : isNotDarkThemeAndOnAndNotEnableAndLoading ? "node-1448_45803" : isDarkThemeAndLiveAndNotEnableAndLoading ? "node-1448_45818" : "node-1448_45833"} data-name="icon/load/loading 2">
          <div className="absolute inset-[6.25%]" id={isNotDarkThemeAndOffAndNotEnableAndLoading ? "node-I1448_45773-1833_86611" : isDarkThemeAndOffAndNotEnableAndLoading ? "node-I1448_45758-1833_86611" : isNotDarkThemeAndLiveAndNotEnableAndLoading ? "node-I1448_45788-1833_86611" : isNotDarkThemeAndOnAndNotEnableAndLoading ? "node-I1448_45803-1833_86611" : isDarkThemeAndLiveAndNotEnableAndLoading ? "node-I1448_45818-1833_86611" : "node-I1448_45833-1833_86611"} data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={isNotDarkThemeAndLiveAndNotEnableAndLoading ? imgUnion2 : isDarkThemeAndLiveAndNotEnableAndLoading ? imgUnion1 : imgUnion} />
          </div>
        </div>
      )}
    </div>
  );
}SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.