const imgLine75Stroke = "https://www.figma.com/api/mcp/asset/9abb782c-eaaa-4c7f-99cd-39680ba29a25";
const imgUnion = "https://www.figma.com/api/mcp/asset/4a9c60ad-203d-4d7c-949d-b83cba1841bd";
const img = "https://www.figma.com/api/mcp/asset/d5e3bc4c-3185-4b23-8e4f-0efeaf3378cd";
const imgUnion1 = "https://www.figma.com/api/mcp/asset/a4181017-68bf-46f8-922d-e07921b39619";

type StepItemProps = {
  className?: string;
  direction?: "horizontal" | "vertical";
  state?: "pending" | "active" | "completed";
  style?: "number" | "icon";
};

export default function StepItem({ className, direction = "horizontal", state = "completed", style = "number" }: StepItemProps) {
  const isActive = state === "active";
  const isHorizontalAndActive = direction === "horizontal" && state === "active";
  const isHorizontalAndIconAndActive = direction === "horizontal" && style === "icon" && state === "active";
  const isHorizontalAndIconAndCompleted = direction === "horizontal" && style === "icon" && state === "completed";
  const isHorizontalAndIconAndPending = direction === "horizontal" && style === "icon" && state === "pending";
  const isHorizontalAndNumberAndActive = direction === "horizontal" && style === "number" && state === "active";
  const isHorizontalAndNumberAndPending = direction === "horizontal" && style === "number" && state === "pending";
  const isHorizontalAndPending = direction === "horizontal" && state === "pending";
  const isPending = state === "pending";
  const isVerticalAndNumber = direction === "vertical" && style === "number";
  const isVerticalAndNumberAndActive = direction === "vertical" && style === "number" && state === "active";
  const isVerticalAndNumberAndCompleted = direction === "vertical" && style === "number" && state === "completed";
  const isVerticalAndNumberAndPending = direction === "vertical" && style === "number" && state === "pending";
  return (
    <div className={className || `content-stretch flex relative ${isVerticalAndNumber ? "gap-[12px] items-start w-[140px]" : "flex-col gap-[6px] items-center justify-center w-[120px]"}`} id={isVerticalAndNumberAndPending ? "node-4943_7255" : isVerticalAndNumberAndActive ? "node-4943_7261" : isVerticalAndNumberAndCompleted ? "node-4943_7267" : isHorizontalAndIconAndPending ? "node-4943_7277" : isHorizontalAndIconAndActive ? "node-4943_7288" : isHorizontalAndIconAndCompleted ? "node-4943_7299" : isHorizontalAndNumberAndPending ? "node-4943_7230" : isHorizontalAndNumberAndActive ? "node-4943_7237" : "node-4943_7244"}>
      <div className={`bg-[rgba(0,0,0,0)] content-stretch flex items-center justify-center overflow-clip relative shrink-0 ${isVerticalAndNumber ? "flex-col" : direction === "horizontal" && style === "icon" ? String.raw`gap-[var(--spacing\/xxs,4px)] w-full` : "w-full"}`} id={isVerticalAndNumberAndPending ? "node-4943_7256" : isVerticalAndNumberAndActive ? "node-4943_7262" : isVerticalAndNumberAndCompleted ? "node-4943_7268" : isHorizontalAndIconAndPending ? "node-4943_7278" : isHorizontalAndIconAndActive ? "node-4943_7289" : isHorizontalAndIconAndCompleted ? "node-4943_7300" : isHorizontalAndNumberAndPending ? "node-4943_7231" : isHorizontalAndNumberAndActive ? "node-4943_7238" : "node-4943_7245"} data-name="Frame">
        <div className={`relative shrink-0 ${isVerticalAndNumberAndPending ? String.raw`bg-[rgba(0,0,0,0)] border-[1.5px] border-[var(--color-type\/icon\/placeholder,#7b7b7b)] border-solid content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]` : isVerticalAndNumberAndActive ? String.raw`bg-[rgba(0,0,0,0)] border-2 border-[var(--color-type\/text\/heading-\&-button,white)] border-solid content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]` : isVerticalAndNumberAndCompleted ? String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]` : direction === "horizontal" && (["active", "pending"].includes(state) || (style === "icon" && state === "completed")) ? String.raw`bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[2px] w-[40px]` : String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] h-[2px] w-[40px]`}`} id={isVerticalAndNumberAndPending ? "node-4943_7257" : isVerticalAndNumberAndActive ? "node-4943_7263" : isVerticalAndNumberAndCompleted ? "node-4943_7269" : isHorizontalAndIconAndPending ? "node-4943_7279" : isHorizontalAndIconAndActive ? "node-4943_7290" : isHorizontalAndIconAndCompleted ? "node-4943_7301" : isHorizontalAndNumberAndPending ? "node-4943_7232" : isHorizontalAndNumberAndActive ? "node-4943_7239" : "node-4943_7246"} data-name="Frame">
          {direction === "vertical" && style === "number" && ["active", "pending"].includes(state) && (
            <div className={`flex flex-col font-["Roboto:SemiBold",sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[16px] text-center whitespace-nowrap ${isPending ? String.raw`text-[color:var(--color-type\/text\/placeholder-\&-button,#7b7b7b)]` : String.raw`text-[color:var(--color-type\/text\/heading-\&-button,white)]`}`} id={isPending ? "node-4943_7258" : "node-4943_7264"} style={{ fontVariationSettings: "'wdth' 100" }}>
              <p className="leading-[1.5]">{isPending ? "3" : isActive ? "2" : ""}</p>
            </div>
          )}
          {isVerticalAndNumberAndCompleted && (
            <div className="relative shrink-0 size-[16px]" data-node-id="4944:351" data-name="icon/Edit/Selected">
              <div className="absolute inset-[21.25%_8.75%_22.03%_8.75%]" data-node-id="I4944:351;1480:76742" data-name="Line 75 (Stroke)">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine75Stroke} />
              </div>
            </div>
          )}
        </div>
        {style === "number" && (
          <div className={`relative shrink-0 ${direction === "vertical" ? String.raw`bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[40px] w-[2px]` : isHorizontalAndPending ? String.raw`bg-[rgba(0,0,0,0)] border-[1.5px] border-[var(--color-type\/icon\/placeholder,#7b7b7b)] border-solid content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]` : isHorizontalAndActive ? String.raw`bg-[rgba(0,0,0,0)] border-2 border-[var(--color-type\/text\/heading-\&-button,white)] border-solid content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]` : String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)] content-stretch flex items-center justify-center overflow-clip rounded-[14px] size-[28px]`}`} id={direction === "vertical" && state === "pending" ? "node-4943_7259" : direction === "vertical" && state === "active" ? "node-4943_7265" : direction === "vertical" && state === "completed" ? "node-4943_7275" : isHorizontalAndPending ? "node-4943_7233" : isHorizontalAndActive ? "node-4943_7240" : "node-4943_7247"} data-name="Frame">
            {direction === "horizontal" && ["active", "pending"].includes(state) && (
              <div className={`flex flex-col font-["Roboto:SemiBold",sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[16px] text-center whitespace-nowrap ${isPending ? String.raw`text-[color:var(--color-type\/text\/placeholder-\&-button,#7b7b7b)]` : String.raw`text-[color:var(--color-type\/text\/heading-\&-button,white)]`}`} id={isPending ? "node-4943_7234" : "node-4943_7241"} style={{ fontVariationSettings: "'wdth' 100" }}>
                <p className="leading-[1.5]">{isPending ? "3" : isActive ? "2" : ""}</p>
              </div>
            )}
            {direction === "horizontal" && state === "completed" && (
              <div className="relative shrink-0 size-[16px]" data-node-id="4943:7248" data-name="icon/Edit/Selected">
                <div className="absolute inset-[21.25%_8.75%_22.03%_8.75%]" data-node-id="I4943:7248;1480:76742" data-name="Line 75 (Stroke)">
                  <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine75Stroke} />
                </div>
              </div>
            )}
          </div>
        )}
        {direction === "horizontal" && style === "number" && <div className="bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[2px] relative shrink-0 w-[40px]" id={isPending ? "node-4943_7235" : isActive ? "node-4943_7242" : "node-4943_7253"} data-name="Frame" />}
        {isHorizontalAndIconAndCompleted && (
          <>
            <div className="relative shrink-0 size-[32px]" data-node-id="4944:355" data-name="icon/Feature/Recently used">
              <div className="absolute inset-[6.25%]" data-node-id="I4944:355;1585:15671" data-name="Union">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
              </div>
            </div>
            <div className="bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[2px] relative shrink-0 w-[40px]" data-node-id="4943:7308" data-name="Frame" />
          </>
        )}
        {isHorizontalAndIconAndActive && (
          <>
            <div className="relative shrink-0 size-[32px]" data-node-id="4944:372" data-name="icon/Feature/Demo">
              <div className="absolute inset-[6.25%_6.25%_6.26%_6.25%]" data-node-id="I4944:372;1355:28810" data-name="导出">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
              </div>
            </div>
            <div className="bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[2px] relative shrink-0 w-[40px]" data-node-id="4943:7297" data-name="Frame" />
          </>
        )}
        {isHorizontalAndIconAndPending && (
          <>
            <div className="relative shrink-0 size-[32px]" data-node-id="4944:414" data-name="icon/Feature/AI frame interpolation">
              <div className="absolute inset-[12.5%_6.25%]" data-node-id="I4944:414;1591:23520" data-name="Union">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
              </div>
            </div>
            <div className="bg-[var(--color-type\/icon\/placeholder,#7b7b7b)] h-[2px] relative shrink-0 w-[40px]" data-node-id="4943:7286" data-name="Frame" />
          </>
        )}
      </div>
      <p className={`relative shrink-0 text-[14px] ${isVerticalAndNumberAndPending ? String.raw`font-["Roboto:Regular",sans-serif] font-normal leading-[1.5] text-[color:var(--color-type\/text\/placeholder-\&-button,#7b7b7b)] whitespace-nowrap` : isVerticalAndNumberAndActive ? String.raw`font-["Roboto:SemiBold",sans-serif] font-semibold leading-[normal] text-[color:var(--color-type\/text\/heading-\&-button,white)] whitespace-nowrap` : isVerticalAndNumberAndCompleted ? String.raw`font-["Roboto:Regular",sans-serif] font-normal leading-[1.5] text-[color:var(--ux\/brand\/brand,#2fb54e)] whitespace-nowrap` : isHorizontalAndPending ? String.raw`font-["Roboto:Regular",sans-serif] font-normal leading-[1.5] text-[color:var(--color-type\/text\/placeholder-\&-button,#7b7b7b)] text-center w-full` : isHorizontalAndActive ? String.raw`font-["Roboto:SemiBold",sans-serif] font-semibold leading-[normal] text-[color:var(--color-type\/text\/heading-\&-button,white)] text-center w-full` : String.raw`font-["Roboto:Regular",sans-serif] font-normal leading-[1.5] text-[color:var(--ux\/brand\/brand,#2fb54e)] text-center w-full`}`} id={isVerticalAndNumberAndPending ? "node-4943_7260" : isVerticalAndNumberAndActive ? "node-4943_7266" : isVerticalAndNumberAndCompleted ? "node-4943_7276" : isHorizontalAndIconAndPending ? "node-4943_7287" : isHorizontalAndIconAndActive ? "node-4943_7298" : isHorizontalAndIconAndCompleted ? "node-4943_7309" : isHorizontalAndNumberAndPending ? "node-4943_7236" : isHorizontalAndNumberAndActive ? "node-4943_7243" : "node-4943_7254"} style={{ fontVariationSettings: "'wdth' 100" }}>
        Step Title
      </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/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0), Roboto/16 pop title: Font(family: "Roboto", style: SemiBold, size: 16, weight: 600, lineHeight: 1.5, letterSpacing: 0).Component descriptions: The following components have usage descriptions or documentation links defined in Figma. These descriptions provide important context about the intended usage, best practices, and any constraints for each component. Follow these guidelines when implementing or using these components.

## Step/Item
**Node ID:** 4943:7310

Step item. direction(horizontal/vertical) × style(number/icon) × state(pending/active/completed). Combine multiple instances side by side to build a full Step bar.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.