const img = "https://www.figma.com/api/mcp/asset/cf7c6179-28b5-49a3-80b1-a10b84620bee";
const imgSubtract = "https://www.figma.com/api/mcp/asset/3dfa5c0f-f9f6-4679-b66f-08f9aeaa1553";
const imgUnion = "https://www.figma.com/api/mcp/asset/4b2c22ef-2ba7-43b9-95dd-1bb5c4e7b903";
const img1 = "https://www.figma.com/api/mcp/asset/556bb417-b0eb-4ee6-9479-9ad622fd4bd7";
const img2 = "https://www.figma.com/api/mcp/asset/4804ee79-6f1a-414e-8e54-06d138b4fadf";

function IconMessageInfo2({ className }: { className?: string }) {
  return (
    <div className={className || "relative size-[16px]"} data-node-id="1168:23690" data-name="icon/Message/Info 2">
      <div className="absolute inset-[6.25%]" data-node-id="1517:27670" data-name="布尔">
        <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
      </div>
    </div>
  );
}

type PromptMessageProps = {
  className?: string;
  children?: React.ReactNode | null;
  showCloseIcon?: boolean;
  size?: "M" | "L";
  status?: "success" | "info" | "error" | "warning";
};

export default function PromptMessage({ className, children = null, showCloseIcon = true, size = "L", status = "info" }: PromptMessageProps) {
  const isError = status === "error";
  const isErrorAndL = status === "error" && size === "L";
  const isErrorAndM = status === "error" && size === "M";
  const isInfo = status === "info";
  const isInfoAndL = status === "info" && size === "L";
  const isInfoAndM = status === "info" && size === "M";
  const isSuccessAndL = status === "success" && size === "L";
  const isSuccessAndM = status === "success" && size === "M";
  const isWarning = status === "warning";
  const isWarningAndL = status === "warning" && size === "L";
  const isWarningAndM = status === "warning" && size === "M";
  return (
    <div className={className || `content-stretch flex gap-[8px] px-[16px] py-[12px] relative rounded-[4px] ${isInfoAndM ? String.raw`bg-[var(--ux\/blue\/msg-bg,#e1eefd)] items-start max-w-[320px]` : isErrorAndM ? String.raw`bg-[var(--ux\/red\/msg-bg,#fff1f0)] items-start max-w-[320px]` : isWarningAndM ? String.raw`bg-[var(--ux\/orange\/msg-bg,#fff3db)] items-start max-w-[320px]` : isSuccessAndM ? "bg-[#f1fbf3] items-start max-w-[320px]" : isInfoAndL ? String.raw`bg-[var(--ux\/blue\/msg-bg,#e1eefd)] items-center max-w-[480px]` : isErrorAndL ? String.raw`bg-[var(--ux\/red\/msg-bg,#fff1f0)] items-center max-w-[480px]` : isWarningAndL ? String.raw`bg-[var(--ux\/orange\/msg-bg,#fff3db)] items-center max-w-[480px]` : "bg-[#f1fbf3] items-center max-w-[480px]"}`} id={isInfoAndM ? "node-1545_19935" : isErrorAndM ? "node-1545_19941" : isWarningAndM ? "node-1545_19940" : isSuccessAndM ? "node-1545_19942" : isInfoAndL ? "node-1408_17143" : isErrorAndL ? "node-1408_17146" : isWarningAndL ? "node-1408_17148" : "node-1408_17150"}>
      {size === "M" && (
        <div className="content-stretch flex items-center py-[2px] relative shrink-0" id={isInfo ? "node-2653_49960" : isError ? "node-2653_49929" : isWarning ? "node-2653_49898" : "node-2653_49871"}>
          {status === "success" && (
            <div className="relative shrink-0 size-[16px]" data-node-id="1545:6012" data-name="icon/Message/Success 2">
              <div className="absolute inset-[6.25%]" data-node-id="I1545:6012;1517:29808" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract} />
              </div>
            </div>
          )}
          {isWarning && (
            <div className="relative shrink-0 size-[16px]" data-node-id="1545:6019" data-name="icon/Message/warning 2">
              <div className="absolute inset-[6.25%]" data-node-id="I1545:6019;1538:130" data-name="形状">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={img1} />
              </div>
            </div>
          )}
          {isError && (
            <div className="relative shrink-0 size-[16px]" data-node-id="1545:6026" data-name="icon/Message/Error 2">
              <div className="absolute inset-[6.25%]" data-node-id="I1545:6026;1544:33368" data-name="布尔">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={img2} />
              </div>
            </div>
          )}
          {isInfo && <IconMessageInfo2 className="relative shrink-0 size-[16px]" />}
        </div>
      )}
      {isSuccessAndL && (
        <>
          <div className="relative shrink-0 size-[16px]" data-node-id="1400:16472" data-name="icon/Message/Success 2">
            <div className="absolute inset-[6.25%]" data-node-id="I1400:16472;1517:29808" data-name="Subtract">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract} />
            </div>
          </div>
          <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center max-w-[400px] relative shrink-0" data-node-id="4798:1669" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/brand\/brand,#2fb54e)]" data-node-id="1400:9721" style={{ fontVariationSettings: "'wdth' 100" }}>
                This is a success message and click close to disappear.
              </p>
            )}
          </div>
        </>
      )}
      {isSuccessAndL && showCloseIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="1408:16950" data-name="icon/Edit/Close">
          <div className="absolute inset-[15%]" data-node-id="I1408:16950;1480:74296" data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
          </div>
        </div>
      )}
      {isWarningAndL && (
        <>
          <div className="relative shrink-0 size-[16px]" data-node-id="1400:16455" data-name="icon/Message/warning 2">
            <div className="absolute inset-[6.25%]" data-node-id="I1400:16455;1538:130" data-name="形状">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={img1} />
            </div>
          </div>
          <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center max-w-[400px] relative shrink-0" data-node-id="4798:1661" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/orange\/default,#f68512)]" data-node-id="1400:9727" style={{ fontVariationSettings: "'wdth' 100" }}>
                This is a prompt message and click close to disappear.
              </p>
            )}
          </div>
        </>
      )}
      {isWarningAndL && showCloseIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="1408:16938" data-name="icon/Edit/Close">
          <div className="absolute inset-[15%]" data-node-id="I1408:16938;1480:74296" data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
          </div>
        </div>
      )}
      {isErrorAndL && (
        <>
          <div className="relative shrink-0 size-[16px]" data-node-id="1400:16442" data-name="icon/Message/Error 2">
            <div className="absolute inset-[6.25%]" data-node-id="I1400:16442;1544:33368" data-name="布尔">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={img2} />
            </div>
          </div>
          <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center max-w-[400px] relative shrink-0" data-node-id="4798:1714" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/red\/default,#ea4233)]" data-node-id="1400:9733" style={{ fontVariationSettings: "'wdth' 100" }}>
                This is an abnormal message and click close to disappear.
              </p>
            )}
          </div>
        </>
      )}
      {isErrorAndL && showCloseIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="1408:16926" data-name="icon/Edit/Close">
          <div className="absolute inset-[15%]" data-node-id="I1408:16926;1480:74296" data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
          </div>
        </div>
      )}
      {isInfoAndL && (
        <>
          <div className="relative shrink-0 size-[16px]" data-node-id="1400:9762" data-name="icon/Message/Info 2">
            <div className="absolute inset-[6.25%]" data-node-id="I1400:9762;1517:27670" data-name="布尔">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
            </div>
          </div>
          <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center max-w-[400px] relative shrink-0" data-node-id="4798:1772" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/blue\/default,#3892f3)]" data-node-id="1400:9739" style={{ fontVariationSettings: "'wdth' 100" }}>
                This is an information message and click close to disappear.
              </p>
            )}
          </div>
        </>
      )}
      {isInfoAndL && showCloseIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="1408:16915" data-name="icon/Edit/Close">
          <div className="absolute inset-[15%]" data-node-id="I1408:16915;1480:74296" data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
          </div>
        </div>
      )}
      {isSuccessAndM && (
        <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center relative shrink-0 w-[240px]" data-node-id="4798:1662" data-name="Content">
          {children || (
            <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/brand\/brand,#2fb54e)]" data-node-id="1545:6013" style={{ fontVariationSettings: "'wdth' 100" }}>
              This is a success message and will disappear voluntarily.
            </p>
          )}
        </div>
      )}
      {isSuccessAndM && showCloseIcon && (
        <div className="content-stretch flex items-center py-[2px] relative shrink-0" data-node-id="2653:49884">
          <div className="relative shrink-0 size-[16px]" data-node-id="1545:6014" data-name="icon/Edit/Close">
            <div className="absolute inset-[15%]" data-node-id="I1545:6014;1480:74296" data-name="Union">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
            </div>
          </div>
        </div>
      )}
      {isWarningAndM && (
        <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center relative shrink-0 w-[240px]" data-node-id="4798:1718" data-name="Content">
          {children || (
            <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/orange\/default,#f68512)]" data-node-id="1545:6020" style={{ fontVariationSettings: "'wdth' 100" }}>
              This is a prompt message and will disappear voluntarily.
            </p>
          )}
        </div>
      )}
      {isWarningAndM && showCloseIcon && (
        <div className="content-stretch flex items-center py-[2px] relative shrink-0" data-node-id="2653:49913">
          <div className="relative shrink-0 size-[16px]" data-node-id="1545:6021" data-name="icon/Edit/Close">
            <div className="absolute inset-[15%]" data-node-id="I1545:6021;1480:74296" data-name="Union">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
            </div>
          </div>
        </div>
      )}
      {isErrorAndM && (
        <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center relative shrink-0 w-[240px]" data-node-id="4798:1780" data-name="Content">
          {children || (
            <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/red\/default,#ea4233)]" data-node-id="1545:6027" style={{ fontVariationSettings: "'wdth' 100" }}>
              This is an abnormal message and will disappear voluntarily.
            </p>
          )}
        </div>
      )}
      {isErrorAndM && showCloseIcon && (
        <div className="content-stretch flex items-center py-[2px] relative shrink-0" data-node-id="2653:49944">
          <div className="relative shrink-0 size-[16px]" data-node-id="1545:6028" data-name="icon/Edit/Close">
            <div className="absolute inset-[15%]" data-node-id="I1545:6028;1480:74296" data-name="Union">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
            </div>
          </div>
        </div>
      )}
      {isInfoAndM && (
        <div className="content-center flex flex-wrap gap-[var(--spacing\/m,0px)] gap-y-[16px] items-center justify-center relative shrink-0 w-[240px]" data-node-id="4798:1756" data-name="Content">
          {children || (
            <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/blue\/default,#3892f3)]" data-node-id="1545:6034" style={{ fontVariationSettings: "'wdth' 100" }}>
              This is an information message and will disappear voluntarily.
            </p>
          )}
        </div>
      )}
      {isInfoAndM && showCloseIcon && (
        <div className="content-stretch flex items-center py-[2px] relative shrink-0" data-node-id="2653:49975">
          <div className="relative shrink-0 size-[16px]" data-node-id="1545:6035" data-name="icon/Edit/Close">
            <div className="absolute inset-[15%]" data-node-id="I1545:6035;1480:74296" data-name="Union">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
            </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"`.These styles are contained in the design: Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0).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.