@using Blazorise.Video
<MudCard Elevation="27" class="f-full m-1 bg-[#2E2E48] rounded-lg w-[20rem] lg:w-[35rem] md:w-[25rem] sm:w-[18rem]">
    <MudCardContent>

        <MudStack Justify="Justify.SpaceBetween">
            <Video Source="@VideoSrc"  Poster="@ImageSrc"></Video>

            @* <video controls preload="none"  poster="@ImageSrc">
                <source src="@VideoSrc" type="video/mp4">
                Your browser does not support the video tag.
            </video> *@
            

            @*<MudImage Src="@ImageSrc" ObjectFit="ObjectFit.Cover" Class="rounded-lg" />
            <MudText Typo="Typo.h6" class=" font-outfit mt-1">@Name</MudText>
            <p class="text-gray-400">
            @Detail
            </p> *@
            <p class="font-bold">@Name</p>
            <div class="flex flex-wrap space-x-1 -mt-2">
                @foreach (var feild in Feilds)
                {
                    <div class="bg-[#232339] px-3 py-1 mt-1 h-auto rounded-md text-[0.7rem] ">
                        <p>@feild</p>
                    </div>
                }


            </div>

            @if (ShowButton)
            {
                @* <MudButton StartIcon="@Icons.Material.Filled.InsertLink" Variant="Variant.Outlined" Color="Color.Primary"
            FullWidth="true">@ButtonText</MudButton> *@
            }
        </MudStack>
    </MudCardContent>
</MudCard>

@code {
    [Parameter] public string Name { get; set; }
    [Parameter] public string Detail { get; set; }
    [Parameter] public string Link { get; set; }
    [Parameter] public string[] Feilds { get; set; }
    [Parameter] public string ImageSrc { get; set; }
    [Parameter] public string VideoSrc { get; set; }
    [Parameter] public bool ShowButton { get; set; } = true;
    [Parameter] public string ButtonText { get; set; }
}