const img = "https://www.figma.com/api/mcp/asset/67e5ba06-30ab-4e72-a9b2-26436b466cf4";
const img1 = "https://www.figma.com/api/mcp/asset/c6095006-bf77-4710-887c-7fbd8211c89b";
const img2 = "https://www.figma.com/api/mcp/asset/b599ac38-2977-42f3-8dc8-f47484f373d6";
const img3 = "https://www.figma.com/api/mcp/asset/6a0c2cb5-9064-4814-b5be-efaab979d8d2";

type InputNumberProps = {
  className?: string;
  property1?: "Default" | "Only Add" | "Only Reduce" | "Readonly";
};

export default function InputNumber({ className, property1 = "Default" }: InputNumberProps) {
  const isOnlyAdd = property1 === "Only Add";
  const isOnlyReduce = property1 === "Only Reduce";
  const isReadonly = property1 === "Readonly";
  return (
    <div className={className || "border border-[var(--color-type\\/line\\/deep-divider,#353535)] border-solid content-stretch flex h-[var(--size\\/xxs,32px)] items-center max-w-[200px] min-w-[100px] relative rounded-[4px] w-[128px]"} id={isReadonly ? "node-4684_7184" : isOnlyReduce ? "node-4684_7172" : isOnlyAdd ? "node-4684_7160" : "node-4684_7158"}>
      <div className="aspect-[32/32] border-[var(--color-type\/line\/deep-divider,#353535)] border-r border-solid content-stretch flex h-full items-center justify-center relative shrink-0" id={isReadonly ? "node-4684_7185" : isOnlyReduce ? "node-4684_7173" : isOnlyAdd ? "node-4684_7161" : "node-4684_7147"}>
        <div className="relative shrink-0 size-[16px]" id={isReadonly ? "node-4684_7186" : isOnlyReduce ? "node-4684_7174" : isOnlyAdd ? "node-4684_7162" : "node-4684_7148"} data-name="icon/Edit/Minus">
          <div className="absolute inset-[46.25%_18.75%]" id={isReadonly ? "node-I4684_7186-1480_76741" : isOnlyReduce ? "node-I4684_7174-1480_76741" : isOnlyAdd ? "node-I4684_7162-1480_76741" : "node-I4684_7148-1480_76741"} data-name="布尔">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={["Only Add", "Readonly"].includes(property1) ? img2 : img} />
          </div>
        </div>
      </div>
      <div className={`flex flex-[1_0_0] flex-col font-["Helvetica_Neue:Regular",sans-serif] justify-center leading-[0] min-w-[40px] not-italic relative text-[14px] text-center ${isReadonly ? String.raw`text-[color:var(--color-type\/text\/disable-grey-button,#7b7b7b)]` : String.raw`text-[color:var(--color-type\/text\/text_1,#f8f8f8)]`}`} id={isReadonly ? "node-4684_7187" : isOnlyReduce ? "node-4684_7175" : isOnlyAdd ? "node-4684_7163" : "node-4684_7149"}>
        <p className="leading-[16px]">{isOnlyReduce ? "10" : isOnlyAdd ? "0" : isReadonly ? "6" : "6"}</p>
      </div>
      <div className="aspect-[32/32] border-[var(--color-type\/line\/deep-divider,#353535)] border-l border-solid content-stretch flex h-full items-center justify-center relative shrink-0" id={isReadonly ? "node-4684_7188" : isOnlyReduce ? "node-4684_7176" : isOnlyAdd ? "node-4684_7164" : "node-4684_7150"}>
        <div className="relative shrink-0 size-[16px]" id={isReadonly ? "node-4684_7189" : isOnlyReduce ? "node-4684_7177" : isOnlyAdd ? "node-4684_7165" : "node-4684_7151"} data-name="icon/Edit/Add 1">
          <div className="absolute inset-[9.38%]" id={isReadonly ? "node-I4684_7189-1480_76688" : isOnlyReduce ? "node-I4684_7177-1480_76688" : isOnlyAdd ? "node-I4684_7165-1480_76688" : "node-I4684_7151-1480_76688"} data-name="布尔">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={["Only Reduce", "Readonly"].includes(property1) ? img3 : img1} />
          </div>
        </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.