Untitled

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

// Import required components
import ProgressStep from "./components/ProgressStep";
import Label from "./components/Label";
import HintText from "./components/HintText";

type LayoutDirection = 'horizontal' | 'vertical';
type StepStatus = 'Incomplete' | 'Active' | 'Complete';

interface Step {
  id: string;
  title: string;
  description?: string;
  status: StepStatus;
}

function ProgressIndicator() {
  useEffect(() => {
    const createComponent = async () => {
      try {
        // Sample steps data
        const steps: Step[] = [
          {
            id: '1',
            title: 'Account Details',
            description: 'Setup your basic account',
            status: 'Complete'
          },
          {
            id: '2',
            title: 'Personal Information',
            description: 'Tell us about yourself',
            status: 'Active'
          },
          {
            id: '3',
            title: 'Business Profile',
            description: 'Setup your business details',
            status: 'Incomplete'
          },
          {
            id: '4',
            title: 'Payment Information',
            description: 'Add payment method',
            status: 'Incomplete'
          }
        ];

        const node = await figma.createNodeFromJSXAsync(
          <AutoLayout
            direction="vertical"
            spacing={48}
            padding={32}
          >
            {/* Horizontal Layout */}
            <AutoLayout
              direction="vertical"
              spacing={8}
              width={800}
            >
              <Label
                label="Horizontal Layout"
                state="default"
              />
              <HorizontalStepper steps={steps} />
            </AutoLayout>

            {/* Vertical Layout */}
            <AutoLayout
              direction="vertical"
              spacing={8}
              width={400}
            >
              <Label
                label="Vertical Layout"
                state="default"
              />
              <VerticalStepper steps={steps} />
            </AutoLayout>
          </AutoLayout>
        );

        figma.currentPage.appendChild(node);
        figma.viewport.scrollAndZoomIntoView([node]);
      } catch (error) {
        figma.notify(`Error creating progress indicator: ${error.message}`);
      }
    };

    createComponent();
  });

  return <Text>Progress Indicator Component</Text>;
}

// Horizontal Stepper Component
function HorizontalStepper({ steps }: { steps: Step[] }) {
  return (
    <AutoLayout
      width="fill-parent"
      padding={24}
      fill="#FFFFFF"
      stroke="#E1E4EA"
      cornerRadius={12}
      spacing={0}
    >
      <AutoLayout
        width="fill-parent"
        verticalAlignItems="center"
        spacing={0}
      >
        {steps.map((step, index) => (
          <AutoLayout
            key={step.id}
            width={`${100 / steps.length}%`}
            verticalAlignItems="center"
            horizontalAlignItems="center"
          >
            <AutoLayout
              direction="vertical"
              spacing={12}
              verticalAlignItems="center"
              width="fill-parent"
            >
              <ProgressStep
                type="Numbered"
                state={step.status}
                size="md"
                stepNumber={parseInt(step.id)}
                title={step.title}
                description={step.description}
              />
              
              <AutoLayout
                direction="vertical"
                spacing={4}
                width="fill-parent"
                horizontalAlignItems="center"
              >
                <Text
                  fontFamily="Inter"
                  fontSize={14}
                  fontWeight="bold"
                  fill="#1E1D2B"
                >
                  {step.title}
                </Text>
                {step.description && (
                  <HintText
                    text={step.description}
                    state="default"
                  />
                )}
              </AutoLayout>
            </AutoLayout>

            {index < steps.length - 1 && (
              <AutoLayout
                width={40}
                height={2}
                fill={step.status === 'Complete' ? "#1D9BF0" : "#E1E4EA"}
              />
            )}
          </AutoLayout>
        ))}
      </AutoLayout>
    </AutoLayout>
  );
}

// Vertical Stepper Component
function VerticalStepper({ steps }: { steps: Step[] }) {
  return (
    <AutoLayout
      direction="vertical"
      width="fill-parent"
      padding={24}
      fill="#FFFFFF"
      stroke="#E1E4EA"
      cornerRadius={12}
      spacing={0}
    >
      {steps.map((step, index) => (
        <AutoLayout
          key={step.id}
          direction="vertical"
          width="fill-parent"
          spacing={0}
        >
          <AutoLayout
            spacing={16}
            width="fill-parent"
            verticalAlignItems="start"
          >
            <AutoLayout
              direction="vertical"
              spacing={0}
              verticalAlignItems="center"
            >
              <ProgressStep
                type="LineText"
                state={step.status}
                size="md"
                stepNumber={parseInt(step.id)}
                title={step.title}
                description={step.description}
              />
              
              {index < steps.length - 1 && (
                <AutoLayout
                  width={2}
                  height={40}
                  fill={step.status === 'Complete' ? "#1D9BF0" : "#E1E4EA"}
                />
              )}
            </AutoLayout>

            <AutoLayout
              direction="vertical"
              spacing={4}
              width="fill-parent"
            >
              <Text
                fontFamily="Inter"
                fontSize={14}
                fontWeight="bold"
                fill="#1E1D2B"
              >
                {step.title}
              </Text>
              {step.description && (
                <HintText
                  text={step.description}
                  state="default"
                />
              )}
            </AutoLayout>
          </AutoLayout>
        </AutoLayout>
      ))}
    </AutoLayout>
  );
}

widget.register(ProgressIndicator);