Stepper

import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperLabel,
  StepperList,
  StepperNext,
  StepperPrevious,
  StepperTrigger,
  useStepperItem,
} from "@/components/ui/stepper";

import * as React from "react";
import { Check, CreditCard, ShoppingCart, Truck } from "lucide-react";

import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperLabel,
  StepperList,
  StepperNext,
  StepperPrevious,
  StepperTrigger,
  useStepperItem,
} from "@/components/ui/stepper";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";

type StepValue = "cart" | "shipping" | "payment";

export function CheckoutFlow() {
  const [value, setValue] = React.useState<StepValue>("cart");
  const [showLabels, setShowLabels] = React.useState(true);

  return (
    <Stepper value={value} onValueChange={(next) => setValue(next as StepValue)}>
      <StepperList>
        <CheckoutStep
          value="cart"
          title="Cart"
          description="Review items"
          icon={ShoppingCart}
          showLabels={showLabels}
        />
        <CheckoutStep
          value="shipping"
          title="Shipping"
          description="Delivery details"
          icon={Truck}
          showLabels={showLabels}
        />
        <CheckoutStep
          value="payment"
          title="Payment"
          description="Secure checkout"
          icon={CreditCard}
          showLabels={showLabels}
        />
      </StepperList>

      <StepperContent value="cart">Review selected products.</StepperContent>
      <StepperContent value="shipping">Confirm delivery details.</StepperContent>
      <StepperContent value="payment">Choose a payment method.</StepperContent>

      <div className="mt-6 flex justify-between">
        <StepperPrevious />
        {value === "payment" ? (
          <Button type="button">Place order</Button>
        ) : (
          <StepperNext />
        )}
      </div>

      <label className="mt-4 flex items-center justify-center gap-2 border-t pt-4">
        <Checkbox
          checked={showLabels}
          onCheckedChange={(checked) => setShowLabels(checked === true)}
        />
        Show labels
      </label>
    </Stepper>
  );
}

function CheckoutStep({
  value,
  title,
  description,
  icon: Icon,
  showLabels,
}: {
  value: StepValue;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  showLabels: boolean;
}) {
  const { stepPosition, stepState } = useStepperItem<StepValue>();
  const isComplete = stepState === "completed" || stepPosition === "previous";

  return (
    <StepperItem value={value} defaultTrigger={false}>
      <StepperTrigger>
        <StepperIndicator>
          {isComplete ? <Check /> : <Icon />}
        </StepperIndicator>
        <span className="relative block min-h-10 min-w-0">
          <span
            className={
              showLabels
                ? "flex min-w-0 flex-col gap-1"
                : "invisible flex min-w-0 flex-col gap-1 opacity-0"
            }
          >
            <StepperLabel>{title}</StepperLabel>
            <StepperDescription>{description}</StepperDescription>
          </span>
        </span>
      </StepperTrigger>
    </StepperItem>
  );
}