@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Tabs" Code="@_codeTabsBasic">
    <Tabs ActiveValue="account" Class="w-full max-w-md">
        <TabsList>
            <TabsTrigger Value="account">Account</TabsTrigger>
            <TabsTrigger Value="password">Password</TabsTrigger>
        </TabsList>
        <TabsContent Value="account">
            <Lumeo.Text Size="sm" Color="muted" Class="pt-2">Manage your account settings here.</Lumeo.Text>
        </TabsContent>
        <TabsContent Value="password">
            <Lumeo.Text Size="sm" Color="muted" Class="pt-2">Change your password here.</Lumeo.Text>
        </TabsContent>
    </Tabs>
</PatternCard>

<PatternCard Label="Three Tabs" Code="@_codeTabsThree">
    <Tabs ActiveValue="overview" Class="w-full max-w-md">
        <TabsList>
            <TabsTrigger Value="overview">Overview</TabsTrigger>
            <TabsTrigger Value="analytics">Analytics</TabsTrigger>
            <TabsTrigger Value="reports">Reports</TabsTrigger>
        </TabsList>
        <TabsContent Value="overview">
            <Lumeo.Text Size="sm" Color="muted" Class="pt-2">Overview content goes here.</Lumeo.Text>
        </TabsContent>
        <TabsContent Value="analytics">
            <Lumeo.Text Size="sm" Color="muted" Class="pt-2">Analytics content goes here.</Lumeo.Text>
        </TabsContent>
        <TabsContent Value="reports">
            <Lumeo.Text Size="sm" Color="muted" Class="pt-2">Reports content goes here.</Lumeo.Text>
        </TabsContent>
    </Tabs>
</PatternCard>

<PatternCard Label="With Content" Code="@_codeTabsContent">
    <Tabs @bind-ActiveValue="_tabsActiveValue" Class="w-full max-w-md">
        <TabsList>
            <TabsTrigger Value="profile">Profile</TabsTrigger>
            <TabsTrigger Value="settings">Settings</TabsTrigger>
        </TabsList>
        <TabsContent Value="profile">
            <Stack Gap="2" Class="pt-2">
                <Label>Display Name</Label>
                <Input placeholder="Your display name" />
            </Stack>
        </TabsContent>
        <TabsContent Value="settings">
            <Flex Align="center" Justify="between" Class="pt-2">
                <Label>Email notifications</Label>
                <Switch />
            </Flex>
        </TabsContent>
    </Tabs>
</PatternCard>
</Stack>

@code {
    private string _tabsActiveValue = "profile";

        private string _codeTabsBasic = @"<Tabs ActiveValue=""account"">
        <TabsList>
            <TabsTrigger Value=""account"">Account</TabsTrigger>
            <TabsTrigger Value=""password"">Password</TabsTrigger>
        </TabsList>
        <TabsContent Value=""account"">
            <p>Manage your account settings here.</p>
        </TabsContent>
        <TabsContent Value=""password"">
            <p>Change your password here.</p>
        </TabsContent>
    </Tabs>";

        private string _codeTabsThree = @"<Tabs ActiveValue=""overview"">
        <TabsList>
            <TabsTrigger Value=""overview"">Overview</TabsTrigger>
            <TabsTrigger Value=""analytics"">Analytics</TabsTrigger>
            <TabsTrigger Value=""reports"">Reports</TabsTrigger>
        </TabsList>
        <TabsContent Value=""overview"">Overview content.</TabsContent>
        <TabsContent Value=""analytics"">Analytics content.</TabsContent>
        <TabsContent Value=""reports"">Reports content.</TabsContent>
    </Tabs>";

        private string _codeTabsContent = @"<Tabs @bind-ActiveValue=""_active"">
        <TabsList>
            <TabsTrigger Value=""profile"">Profile</TabsTrigger>
            <TabsTrigger Value=""settings"">Settings</TabsTrigger>
        </TabsList>
        <TabsContent Value=""profile"">
            <Label>Display Name</Label>
            <Input placeholder=""Your display name"" />
        </TabsContent>
        <TabsContent Value=""settings"">
            <Label>Email notifications</Label>
            <Switch />
        </TabsContent>
    </Tabs>";
}
