const imgUnion = "https://www.figma.com/api/mcp/asset/18b0ebb9-f207-4d5c-af71-90520ca74885";
const imgLine13Stroke = "https://www.figma.com/api/mcp/asset/77c3dd9f-ce92-4c3c-b4e5-4d383013a720";

function IconMarkStarOn({ className }: { className?: string }) {
  return (
    <div className={className || "relative size-[16px]"} data-node-id="4935:7178" data-name="icon/mark/star on">
      <div className="absolute inset-[8.77%_8.47%_11.33%_8.48%]" data-node-id="4935:7179" data-name="Union">
        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
      </div>
    </div>
  );
}

function IconMarkStar({ className }: { className?: string }) {
  return (
    <div className={className || "relative size-[16px]"} data-node-id="4935:7180" data-name="icon/mark/star">
      <div className="absolute flex inset-[8.75%_8.47%_11.35%_8.48%] items-center justify-center" style={{ containerType: "size" }}>
        <div className="flex-none h-[100cqw] rotate-90 w-[100cqh]">
          <div className="relative size-full" data-node-id="4935:7181" data-name="Line 13 (Stroke)">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgLine13Stroke} />
          </div>
        </div>
      </div>
    </div>
  );
}

type RatingProps = {
  className?: string;
  theme?: "dark" | "light";
  value?: "1" | "2" | "3" | "4" | "5";
};

export default function Rating({ className, theme = "dark", value = "1" }: RatingProps) {
  const is1Or2Or3 = ["1", "2", "3"].includes(value);
  return (
    <div className={className || "bg-[rgba(0,0,0,0)] content-stretch flex gap-[4px] items-center relative"} id={theme === "light" && value === "5" ? "node-4935_7283" : theme === "light" && value === "4" ? "node-4935_7272" : theme === "light" && value === "3" ? "node-4935_7261" : theme === "light" && value === "2" ? "node-4935_7250" : theme === "light" && value === "1" ? "node-4935_7239" : theme === "dark" && value === "5" ? "node-4935_7228" : theme === "dark" && value === "4" ? "node-4935_7217" : theme === "dark" && value === "3" ? "node-4935_7206" : theme === "dark" && value === "2" ? "node-4935_7195" : "node-4935_7184"}>
      <IconMarkStarOn className="relative shrink-0 size-[24px]" />
      {["2", "3", "4", "5"].includes(value) && <IconMarkStarOn className="relative shrink-0 size-[24px]" />}
      {["3", "4", "5"].includes(value) && <IconMarkStarOn className="relative shrink-0 size-[24px]" />}
      {is1Or2Or3 && (
        <>
          <IconMarkStar className="relative shrink-0 size-[24px]" />
          <IconMarkStar className="relative shrink-0 size-[24px]" />
        </>
      )}
      {["1", "2"].includes(value) && <IconMarkStar className="relative shrink-0 size-[24px]" />}
      {["4", "5"].includes(value) && <IconMarkStarOn className="relative shrink-0 size-[24px]" />}
      {value === "1" && <IconMarkStar className="relative shrink-0 size-[24px]" />}
      {value === "4" && <IconMarkStar className="relative shrink-0 size-[24px]" />}
      {value === "5" && <IconMarkStarOn className="relative shrink-0 size-[24px]" />}
    </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"`.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.

## Rating
**Node ID:** 4935:7294

Rating with 5 stars using TVU design system icons. theme(dark/light) × value(1-5).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.