type BadgeProps = {
  className?: string;
  color?: "Green" | "Blue" | "Orange" | "Red" | "Black";
  tag?: "Filled" | "Line";
  type?: "Circle" | "Rectangle";
};

export default function Badge({ className, color = "Green", tag = "Filled", type = "Circle" }: BadgeProps) {
  const isCircleAndBlackAndFilled = type === "Circle" && color === "Black" && tag === "Filled";
  const isCircleAndBlackAndLine = type === "Circle" && color === "Black" && tag === "Line";
  const isCircleAndBlueAndFilled = type === "Circle" && color === "Blue" && tag === "Filled";
  const isCircleAndBlueAndLine = type === "Circle" && color === "Blue" && tag === "Line";
  const isCircleAndGreenAndLine = type === "Circle" && color === "Green" && tag === "Line";
  const isCircleAndOrangeAndFilled = type === "Circle" && color === "Orange" && tag === "Filled";
  const isCircleAndOrangeAndLine = type === "Circle" && color === "Orange" && tag === "Line";
  const isCircleAndRedAndFilled = type === "Circle" && color === "Red" && tag === "Filled";
  const isCircleAndRedAndLine = type === "Circle" && color === "Red" && tag === "Line";
  const isRectangleAndBlackAndFilled = type === "Rectangle" && color === "Black" && tag === "Filled";
  const isRectangleAndBlackAndLine = type === "Rectangle" && color === "Black" && tag === "Line";
  const isRectangleAndBlueAndFilled = type === "Rectangle" && color === "Blue" && tag === "Filled";
  const isRectangleAndBlueAndLine = type === "Rectangle" && color === "Blue" && tag === "Line";
  const isRectangleAndGreenAndFilled = type === "Rectangle" && color === "Green" && tag === "Filled";
  const isRectangleAndGreenAndLine = type === "Rectangle" && color === "Green" && tag === "Line";
  const isRectangleAndOrangeAndFilled = type === "Rectangle" && color === "Orange" && tag === "Filled";
  const isRectangleAndOrangeAndLine = type === "Rectangle" && color === "Orange" && tag === "Line";
  const isRectangleAndRedAndFilled = type === "Rectangle" && color === "Red" && tag === "Filled";
  const isRectangleAndRedAndLine = type === "Rectangle" && color === "Red" && tag === "Line";
  return (
    <div className={className || `${String.raw`content-stretch flex items-center justify-center overflow-clip relative rounded-[var(--radius\/xl,16px)] `}${isRectangleAndBlackAndFilled ? String.raw`bg-[var(--color-type\/line\/deep-divider,#353535)] px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndBlackAndLine ? String.raw`border border-[var(--color-type\/line\/deep-divider,#353535)] border-solid px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndRedAndLine ? String.raw`border border-[var(--ux\/red\/default,#ea4233)] border-solid px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndRedAndFilled ? String.raw`bg-[var(--ux\/red\/default,#ea4233)] px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndOrangeAndLine ? String.raw`border border-[var(--ux\/orange\/default,#f68512)] border-solid px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndOrangeAndFilled ? String.raw`bg-[var(--ux\/orange\/default,#f68512)] px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndBlueAndLine ? String.raw`border border-[var(--ux\/blue\/default,#3892f3)] border-solid px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndBlueAndFilled ? String.raw`bg-[var(--ux\/blue\/default,#3892f3)] px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndGreenAndLine ? String.raw`border border-[var(--ux\/brand\/brand,#2fb54e)] border-solid px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isRectangleAndGreenAndFilled ? String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] px-[var(--spacing\/s,12px)] py-[var(--spacing\/xxs,4px)]` : isCircleAndBlackAndFilled ? String.raw`bg-[var(--color-type\/line\/deep-divider,#353535)] h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndBlackAndLine ? String.raw`border border-[var(--color-type\/line\/deep-divider,#353535)] border-solid h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndRedAndLine ? String.raw`border border-[var(--ux\/red\/default,#ea4233)] border-solid h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndRedAndFilled ? String.raw`bg-[var(--ux\/red\/default,#ea4233)] h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndOrangeAndLine ? String.raw`border border-[var(--ux\/orange\/default,#f68512)] border-solid h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndOrangeAndFilled ? String.raw`bg-[var(--ux\/orange\/default,#f68512)] h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndBlueAndLine ? String.raw`border border-[var(--ux\/blue\/default,#3892f3)] border-solid h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndBlueAndFilled ? String.raw`bg-[var(--ux\/blue\/default,#3892f3)] h-[24px] w-[var(--size\/xxxs,24px)]` : isCircleAndGreenAndLine ? String.raw`border border-[var(--ux\/brand\/brand,#2fb54e)] border-solid h-[24px] w-[var(--size\/xxxs,24px)]` : String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] h-[24px] w-[var(--size\/xxxs,24px)]`}`} id={isRectangleAndBlackAndFilled ? "node-4993_1551" : isRectangleAndBlackAndLine ? "node-4993_1553" : isRectangleAndRedAndLine ? "node-4895_1377" : isRectangleAndRedAndFilled ? "node-4821_1666" : isRectangleAndOrangeAndLine ? "node-4895_1375" : isRectangleAndOrangeAndFilled ? "node-4821_1667" : isRectangleAndBlueAndLine ? "node-4895_1373" : isRectangleAndBlueAndFilled ? "node-4821_1669" : isRectangleAndGreenAndLine ? "node-4895_1371" : isRectangleAndGreenAndFilled ? "node-4821_1668" : isCircleAndBlackAndFilled ? "node-4993_1549" : isCircleAndBlackAndLine ? "node-4993_1547" : isCircleAndRedAndLine ? "node-4895_1369" : isCircleAndRedAndFilled ? "node-4821_1660" : isCircleAndOrangeAndLine ? "node-4895_1367" : isCircleAndOrangeAndFilled ? "node-4821_1661" : isCircleAndBlueAndLine ? "node-4895_1365" : isCircleAndBlueAndFilled ? "node-4821_1663" : isCircleAndGreenAndLine ? "node-4895_1363" : "node-4821_1662"}>
      {type === "Circle" && (
        <div className="flex flex-col font-['Roboto:Regular',sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[12px] text-[color:var(--color-type\/text\/primary-button,white)] text-center whitespace-nowrap" id={isCircleAndBlackAndFilled ? "node-4993_1550" : isCircleAndBlackAndLine ? "node-4993_1548" : isCircleAndRedAndLine ? "node-4895_1370" : isCircleAndRedAndFilled ? "node-4824_8665" : isCircleAndOrangeAndLine ? "node-4895_1368" : isCircleAndOrangeAndFilled ? "node-4824_8663" : isCircleAndBlueAndLine ? "node-4895_1366" : isCircleAndBlueAndFilled ? "node-4824_8659" : isCircleAndGreenAndLine ? "node-4895_1364" : "node-4824_8661"} style={{ fontVariationSettings: "'wdth' 100" }}>
          <p className="leading-[16px]">5</p>
        </div>
      )}
      {type === "Rectangle" && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[16px] relative shrink-0 text-[12px] text-[color:var(--color-type\/text\/primary-button,white)] whitespace-nowrap" id={isRectangleAndBlackAndFilled ? "node-4993_1552" : isRectangleAndBlackAndLine ? "node-4993_1554" : isRectangleAndRedAndLine ? "node-4895_1378" : isRectangleAndRedAndFilled ? "node-4824_8691" : isRectangleAndOrangeAndLine ? "node-4895_1376" : isRectangleAndOrangeAndFilled ? "node-4824_8689" : isRectangleAndBlueAndLine ? "node-4895_1374" : isRectangleAndBlueAndFilled ? "node-4824_8685" : isRectangleAndGreenAndLine ? "node-4895_1372" : "node-4824_8687"} style={{ fontVariationSettings: "'wdth' 100" }}>
          {type === "Rectangle" && color === "Black" ? "Msg" : type === "Rectangle" && color === "Red" ? "Error" : type === "Rectangle" && color === "Orange" ? "Warn" : type === "Rectangle" && color === "Blue" ? "Active" : type === "Rectangle" && color === "Green" ? "Done" : ""}
        </p>
      )}
    </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/12 tips: Font(family: "Roboto", style: Regular, size: 12, weight: 400, lineHeight: 16, 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.