type TabItemProps = {
  className?: string;
  property1?: "Active" | "Normal";
  property2?: "Green" | "White";
  type?: "Line" | "Filled" | "Text";
};

export default function TabItem({ className, property1 = "Normal", property2 = "White", type = "Line" }: TabItemProps) {
  const isActiveAndGreenAndFilled = property1 === "Active" && property2 === "Green" && type === "Filled";
  const isActiveAndGreenAndLine = property1 === "Active" && property2 === "Green" && type === "Line";
  const isActiveAndWhiteAndLine = property1 === "Active" && property2 === "White" && type === "Line";
  const isActiveAndWhiteAndText = property1 === "Active" && property2 === "White" && type === "Text";
  const isNormalAndWhiteAndFilled = property1 === "Normal" && property2 === "White" && type === "Filled";
  return (
    <div className={className || `${String.raw`content-stretch flex h-[var(--size\/xxs,32px)] items-center px-[var(--spacing\/m,16px)] relative `}${isActiveAndWhiteAndLine ? String.raw`border-[var(--color-type\/line\/light-divider,#434343)] border-b-2 border-solid` : isActiveAndGreenAndFilled ? String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)]` : isActiveAndGreenAndLine ? String.raw`border-[var(--ux\/brand\/brand,#2fb54e)] border-b-2 border-solid` : isNormalAndWhiteAndFilled ? String.raw`bg-[var(--color-type\/background\/layer_4,#353535)]` : ""}`} id={isActiveAndWhiteAndLine ? "node-4265_16087" : isActiveAndGreenAndFilled ? "node-4452_7116" : isActiveAndGreenAndLine ? "node-4265_16085" : isNormalAndWhiteAndFilled ? "node-4452_7118" : isActiveAndWhiteAndText ? "node-4605_7204" : "node-4265_16083"}>
      <p className={`leading-[1.5] relative shrink-0 text-[14px] whitespace-nowrap ${isActiveAndGreenAndFilled ? String.raw`font-["Roboto:Regular",sans-serif] font-normal text-[color:var(--color-type\/text\/primary-button,white)]` : isActiveAndGreenAndLine ? String.raw`font-["Roboto:Bold",sans-serif] font-bold text-[color:var(--ux\/brand\/brand,#2fb54e)]` : isNormalAndWhiteAndFilled ? String.raw`font-["Roboto:Regular",sans-serif] font-normal text-[color:var(--color-type\/text\/text_2,#ccc)]` : property1 === "Active" && property2 === "White" && ["Text", "Line"].includes(type) ? String.raw`font-["Roboto:Bold",sans-serif] font-bold text-[color:var(--color-type\/text\/text_1,#f8f8f8)]` : String.raw`font-["Roboto:Regular",sans-serif] font-normal text-[color:var(--color-type\/text\/tips,#9e9e9e)]`}`} id={isActiveAndWhiteAndLine ? "node-4265_16088" : isActiveAndGreenAndFilled ? "node-4452_7117" : isActiveAndGreenAndLine ? "node-4265_16086" : isNormalAndWhiteAndFilled ? "node-4452_7119" : isActiveAndWhiteAndText ? "node-4605_7205" : "node-4265_16084"} style={{ fontVariationSettings: "'wdth' 100" }}>
        Menu xxx
      </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).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.