Setup Wizard

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Stepper,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperSeparator,
  StepperTitle,
} from "@cooud-ui/ui";

export function SetupWizardBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-2xl gap-6 shadow-lg">
        <CardHeader>
          <Stepper value={1} orientation="horizontal">
            <StepperList>
              <StepperItem step={0}>
                <StepperIndicator />
                <StepperTitle>Account</StepperTitle>
                <StepperSeparator />
              </StepperItem>
              <StepperItem step={1}>
                <StepperIndicator />
                <StepperTitle>Workspace</StepperTitle>
                <StepperSeparator />
              </StepperItem>
              <StepperItem step={2}>
                <StepperIndicator />
                <StepperTitle>Team</StepperTitle>
                <StepperSeparator />
              </StepperItem>
              <StepperItem step={3}>
                <StepperIndicator />
                <StepperTitle>Done</StepperTitle>
              </StepperItem>
            </StepperList>
          </Stepper>
        </CardHeader>

        <CardContent className="flex flex-col gap-5">
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">Set up your workspace</CardTitle>
            <p className="text-sm text-fg-secondary">
              Name your workspace and choose its address — you can change these later.
            </p>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="wizard-workspace-name">Workspace name</Label>
            <Input id="wizard-workspace-name" placeholder="Acme Inc" autoComplete="organization" />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="wizard-workspace-url">Workspace URL</Label>
            <div className="flex items-center rounded-lg border border-input bg-surface-base focus-within:ring-2 focus-within:ring-ring">
              <span className="pl-3 text-sm text-fg-tertiary">cooud.app/</span>
              <Input
                id="wizard-workspace-url"
                placeholder="acme"
                autoComplete="off"
                className="border-0 bg-transparent pl-1 focus-visible:ring-0"
              />
            </div>
          </div>
        </CardContent>

        <CardFooter className="flex items-center justify-between">
          <Button variant="outline">Back</Button>
          <div className="flex items-center gap-3">
            <span className="text-sm text-fg-tertiary">Step 2 of 4</span>
            <Button variant="gradient">Continue</Button>
          </div>
        </CardFooter>
      </Card>
    </div>
  );
}