import { Stepper } from "lambda-ui-components";
import { User, MapPin, Check } from "lucide-react";

const steps = [
	{ title: "Personal Info", description: "Details", icon: <User /> },
	{ title: "Address", description: "Shipping", icon: <MapPin /> },
	{ title: "Confirmation", description: "Review", icon: <Check /> },
];

export default function App() {
	return (
		<Stepper steps={steps}>
			{steps.map((step, index) => (
				<Stepper.Step key={index} index={index} {...step} />
			))}
			
			<Stepper.Content index={0}>Step 1 Content</Stepper.Content>
			<Stepper.Content index={1}>Step 2 Content</Stepper.Content>
			<Stepper.Content index={2}>Step 3 Content</Stepper.Content>

			<Stepper.CompletedContent>
				Finished!
			</Stepper.CompletedContent>
		</Stepper>
	);
}