@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Steps" Code="@_codeBasic">
    <Steps CurrentStep="1" Class="w-full max-w-lg">
        <StepsItem Title="Account" Description="Create your account" />
        <StepsItem Title="Profile" Description="Set up your profile" />
        <StepsItem Title="Complete" Description="All done!" />
    </Steps>
</PatternCard>

<PatternCard Label="Clickable Steps" Code="@_codeClickable">
    <Steps @bind-CurrentStep="_currentStep" Clickable="true" Class="w-full max-w-lg">
        <StepsItem Title="Details" />
        <StepsItem Title="Payment" />
        <StepsItem Title="Review" />
        <StepsItem Title="Confirm" />
    </Steps>
</PatternCard>
</Stack>

@code {
    private int _currentStep = 2;

    private string _codeBasic = @"<Steps CurrentStep=""1"">
    <StepsItem Title=""Account"" Description=""Create your account"" />
    <StepsItem Title=""Profile"" Description=""Set up your profile"" />
    <StepsItem Title=""Complete"" Description=""All done!"" />
</Steps>";

    private string _codeClickable = @"<Steps @bind-CurrentStep=""_step"" Clickable=""true"">
    <StepsItem Title=""Details"" />
    <StepsItem Title=""Payment"" />
    <StepsItem Title=""Review"" />
    <StepsItem Title=""Confirm"" />
</Steps>";
}
