const imgLine98Stroke = "https://www.figma.com/api/mcp/asset/4f92d36c-c030-4004-aef2-0ca7436275b8";
const imgUnion = "https://www.figma.com/api/mcp/asset/d6d1a340-553f-4e92-b19c-9d1569789945";
const img = "https://www.figma.com/api/mcp/asset/cf62c248-be9d-402e-bae1-1665cb482bfa";

type TableProps = {
  className?: string;
  align?: "Left" | "Center" | "Right";
  children?: React.ReactNode | null;
  showLeftIcon?: boolean;
  showRightIcon?: boolean;
  type?: "Header" | "Tbody";
};

export default function Table({ className, align = "Left", children = null, showLeftIcon = false, showRightIcon = false, type = "Header" }: TableProps) {
  const isHeader = type === "Header";
  const isTbody = type === "Tbody";
  return (
    <div className={className || `${String.raw`content-stretch flex gap-[var(--spacing\/xxs,4px)] items-center pr-[var(--spacing\/xs,8px)] py-[var(--spacing\/xs,8px)] relative w-[120px] `}${align === "Right" ? "justify-end" : align === "Center" ? "justify-center" : ""}`} id={type === "Tbody" && align === "Right" ? "node-4605_7131" : type === "Tbody" && align === "Center" ? "node-4265_16167" : type === "Tbody" && align === "Left" ? "node-4605_7125" : type === "Header" && align === "Right" ? "node-4605_7118" : type === "Header" && align === "Center" ? "node-4605_7111" : "node-4265_16132"}>
      {isHeader && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,8px)] items-center relative shrink-0" data-node-id="4605:7093" data-name="Content">
          {children || (
            <>
              {showLeftIcon && (
                <div className="relative shrink-0 size-[16px]" data-node-id="4605:7094" data-name="icon/Arrow/Dropdown">
                  <div className="absolute inset-[37.5%_18.13%_30.02%_18.12%]" data-node-id="I4605:7094;2107:20124" data-name="Line 98 (Stroke)">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine98Stroke} />
                  </div>
                </div>
              )}
              <p className="font-['Helvetica_Neue:Bold',sans-serif] leading-[1.2] not-italic relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] whitespace-nowrap" data-node-id="4265:16134">
                Graph Num
              </p>
            </>
          )}
        </div>
      )}
      {isHeader && showRightIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="4265:16135" data-name="icon/Arrow/Sorting">
          <div className="absolute inset-[10.02%_18.13%_9.93%_18.12%]" data-node-id="I4265:16135;2107:269" data-name="Union">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
          </div>
        </div>
      )}
      {isTbody && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,8px)] items-center relative shrink-0" data-node-id="4605:7127" data-name="Content">
          {children || (
            <>
              {showLeftIcon && (
                <div className="relative shrink-0 size-[16px]" data-node-id="4605:7128" data-name="icon/Arrow/Dropdown">
                  <div className="absolute inset-[37.5%_18.13%_30.02%_18.12%]" data-node-id="I4605:7128;2107:20124" data-name="Line 98 (Stroke)">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine98Stroke} />
                  </div>
                </div>
              )}
              <div className="flex flex-col font-['Helvetica_Neue:Regular',sans-serif] justify-center leading-[0] not-italic overflow-hidden relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] text-center text-ellipsis whitespace-nowrap" data-node-id="4605:7129">
                <p className="leading-[1.2] overflow-hidden text-ellipsis">Graph Num</p>
              </div>
            </>
          )}
        </div>
      )}
      {isTbody && showRightIcon && (
        <div className="relative shrink-0 size-[16px]" data-node-id="4605:7130" data-name="icon/Edit/Copy">
          <div className="absolute inset-[6.25%]" data-node-id="I4605:7130;1155:25254" data-name="导出">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
          </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.