[ASP.NET Blazor Server][Radzen]　Buttonの使い方

@page "/flat-buttons"
@using Radzen
@using Radzen.Blazor

@* 通知を表示するためにサービスを注入 *@
@inject NotificationService NotificationService

<RadzenStack Orientation="Orientation.Vertical" Gap="2rem" class="rz-p-12">
    
    <RadzenText TextStyle="TextStyle.H4">Flat Buttons (Variant="Variant.Flat")</RadzenText>
    <RadzenText TextStyle="TextStyle.Body1">
        フラットボタンは背景色がありません。ホバー時のみ背景色が付きます。<br/>
        主に「サブアクション」や「ツールバー」で使用されます。
    </RadzenText>

    @* --- 1. 基本的なフラットボタン（各色） --- *@
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.H6">Basic Colors</RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="1rem">
            
            @* Primary: メインカラー（通常は青系） *@
            <RadzenButton Text="Primary" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Primary" 
                          Click="@(args => OnClick("Primary"))" />

            @* Secondary: サブカラー（グレーや紫系など） *@
            <RadzenButton Text="Secondary" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Secondary" 
                          Click="@(args => OnClick("Secondary"))" />

            @* Success: 成功・完了（緑系） *@
            <RadzenButton Text="Success" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Success" 
                          Click="@(args => OnClick("Success"))" />

            @* Danger: 削除・危険（赤系） *@
            <RadzenButton Text="Danger" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Danger" 
                          Click="@(args => OnClick("Danger"))" />

            @* Info: 情報（水色系） *@
            <RadzenButton Text="Info" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Info" 
                          Click="@(args => OnClick("Info"))" />

        </RadzenStack>
    </RadzenCard>

    @* --- 2. アイコン付きフラットボタン --- *@
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.H6">With Icons</RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="1rem">
            
            @* Icon属性でMaterial Iconsを指定。Textと併用可能 *@
            <RadzenButton Icon="add_circle" 
                          Text="Add New" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Primary" />

            @* Textを省略するとアイコンのみのボタン（ツールバー向け）になる *@
            <RadzenButton Icon="edit" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Warning" 
                          ToolTip="Edit Item" />

            <RadzenButton Icon="delete" 
                          Variant="Variant.Flat" 
                          ButtonStyle="ButtonStyle.Danger" 
                          ToolTip="Delete Item" />
        </RadzenStack>
    </RadzenCard>

    @* --- 3. 濃淡（Shade）のバリエーション --- *@
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.H6">Shades (色の濃さ)</RadzenText>
        <RadzenText TextStyle="TextStyle.Caption">同じVariant.Flatでも、Shadeを変えることで印象を変えられます。</RadzenText>
        
        <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="1rem" AlignItems="AlignItems.Center">
            
            @* Lighter: 最も薄い（ホバー時の色が非常に淡い） *@
            <RadzenButton Text="Lighter" 
                          Variant="Variant.Flat" 
                          Shade="Shade.Lighter" 
                          ButtonStyle="ButtonStyle.Primary" />

            @* Default: 標準 *@
            <RadzenButton Text="Default" 
                          Variant="Variant.Flat" 
                          Shade="Shade.Default" 
                          ButtonStyle="ButtonStyle.Primary" />

            @* Darker: 濃い（文字色が濃くなることが多い） *@
            <RadzenButton Text="Darker" 
                          Variant="Variant.Flat" 
                          Shade="Shade.Darker" 
                          ButtonStyle="ButtonStyle.Primary" />
        </RadzenStack>
    </RadzenCard>

    @* --- 4. 状態（Disabled / Busy） --- *@
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.H6">States</RadzenText>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem">
            
            @* Disabled: クリック不可 *@
            <RadzenButton Text="Disabled" 
                          Variant="Variant.Flat" 
                          Disabled="true" />

            @* IsBusy: 処理中（スピナーが表示される） *@
            <RadzenButton Text="Loading..." 
                          Variant="Variant.Flat" 
                          IsBusy="true" 
                          ButtonStyle="ButtonStyle.Info" />
        </RadzenStack>
    </RadzenCard>

</RadzenStack>

@code {
    // ボタンクリック時の処理
    void OnClick(string buttonName)
    {
        // 画面右下に通知を表示
        NotificationService.Notify(new NotificationMessage 
        { 
            Severity = NotificationSeverity.Info, 
            Summary = "Button Clicked", 
            Detail = $"You clicked the {buttonName} flat button.", 
            Duration = 2000 
        });
    }
}