Untitled

const { widget } = figma;
const { useEffect, AutoLayout, Text, Frame } = widget;

function ProductReviewWidget() {
  // Define the RoomCard component
  const RoomCard = ({ title, location, price }: { title: string; location: string; price: string }) => (
    <AutoLayout
      width="fill-parent"
      padding={16}
      fill="#F8F9FA"
      cornerRadius={12}
      spacing={16}
    >
      <Frame 
        width={80} 
        height={60} 
        cornerRadius={8}
        fill="#E1E4EA"
      />
      <AutoLayout 
        width="fill-parent" 
        verticalAlignItems="center" 
        horizontalAlignItems="space-between"
      >
        <AutoLayout direction="vertical" spacing={4}>
          <Text fontSize={18} fontFamily="Inter" fontWeight={500}>
            {title}
          </Text>
          <Text fontSize={14} fontFamily="Inter" fill="#717784">
            {location}
          </Text>
        </AutoLayout>
        <AutoLayout direction="vertical" horizontalAlignItems="end">
          <Text fontSize={24} fontFamily="Inter" fontWeight={600}>
            {price}
          </Text>
          <Text fontSize={14} fontFamily="Inter" fill="#717784">
            /day
          </Text>
        </AutoLayout>
      </AutoLayout>
    </AutoLayout>
  );

  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout
          direction="vertical"
          padding={24}
          width={480}
          fill="#FFFFFF"
          cornerRadius={16}
          spacing={24}
        >
          {/* Header */}
          <AutoLayout 
            width="fill-parent" 
            verticalAlignItems="center" 
            horizontalAlignItems="space-between"
          >
            <Text fontSize={24} fontFamily="Inter" fontWeight={600}>
              Product Review
            </Text>
            <AutoLayout
              fill="#FEF7E6"
              padding={{ vertical: 4, horizontal: 8 }}
              cornerRadius={8}
              spacing={4}
            >
              <Text fontSize={14} fontFamily="Inter" fill="#F6B518">
                Premium
              </Text>
            </AutoLayout>
          </AutoLayout>

          {/* Room Cards */}
          <RoomCard 
            title="The Loft Room"
            location="2nd Floor, WorkSpace"
            price="$120"
          />
          <RoomCard 
            title="Executive Suite"
            location="5th Floor, HighTower Plaza"
            price="$180"
          />

          {/* Discount Code Section */}
          <AutoLayout
            width="fill-parent"
            fill="#FFFFFF"
            stroke="#E1E4EA"
            cornerRadius={8}
            padding={12}
          >
            <Text fontSize={16} fontFamily="Inter">
              4ABBS451515
            </Text>
          </AutoLayout>

          {/* Discount Badges */}
          <AutoLayout spacing={8}>
            {["5% Off", "10% Off", "15% Off"].map((discount) => (
              <AutoLayout
                key={discount}
                fill="#E8F5E9"
                cornerRadius={8}
                padding={{ vertical: 4, horizontal: 12 }}
              >
                <Text fontSize={14} fontFamily="Inter" fill="#2E7D32">
                  {discount}
                </Text>
              </AutoLayout>
            ))}
          </AutoLayout>

          {/* Price Breakdown */}
          <AutoLayout
            width="fill-parent"
            direction="vertical"
            spacing={16}
            padding={16}
            fill="#F8F9FA"
            cornerRadius={12}
          >
            {[
              { label: "Subtotal", value: "$300.00" },
              { label: "Discount (50%)", value: "-$60.00" },
              { label: "Credit (1h)", value: "-$20.00" },
              { label: "GST (10%)", value: "$22.00", tag: "Inclusive" },
              { label: "Total", value: "$242.00", isTotal: true }
            ].map((item) => (
              <AutoLayout
                key={item.label}
                width="fill-parent"
                verticalAlignItems="center"
                horizontalAlignItems="space-between"
              >
                <AutoLayout spacing={8} verticalAlignItems="center">
                  <Text
                    fontSize={item.isTotal ? 18 : 16}
                    fontFamily="Inter"
                    fontWeight={item.isTotal ? 600 : 400}
                  >
                    {item.label}
                  </Text>
                  {item.tag && (
                    <AutoLayout
                      fill="#F8F9FA"
                      stroke="#E1E4EA"
                      cornerRadius={16}
                      padding={{ vertical: 2, horizontal: 8 }}
                    >
                      <Text fontSize={12} fontFamily="Inter" fill="#717784">
                        {item.tag}
                      </Text>
                    </AutoLayout>
                  )}
                </AutoLayout>
                <Text
                  fontSize={item.isTotal ? 18 : 16}
                  fontFamily="Inter"
                  fontWeight={item.isTotal ? 600 : 400}
                >
                  {item.value}
                </Text>
              </AutoLayout>
            ))}
          </AutoLayout>
        </AutoLayout>
      );

      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };

    createComponent();
  });

  // Base render component
  return <Text>Product Review Widget</Text>;
}

widget.register(ProductReviewWidget);