@page "/productDetail/{ProductId}"

<div class="container mt-5 mb-5">
    <div class="row d-flex justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="row">
                    <div class="col-md-6">
                        <div class="images p-3">
                            <div class="text-center p-4">
                                <img id="main-image" src="@product.ImageUrl" width="250" />
                            </div>
                            <!-- Add thumbnail images -->
                            <div class="thumbnail text-center">
                                <img onclick="change_image(this)" src="@product.ImageUrl" width="70">
                                <img onclick="change_image(this)" src="@product.ImageUrl" width="70">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="product p-4">
                            <!-- Brand and product name -->
                            <div class="mt-4 mb-3">
                                <span class="text-uppercase text-muted brand">@* Orianz *@</span>
                                <h2 class="text-uppercase font-weight-bold">@product.Name</h2> <!-- Adjusted font size and weight -->
                                <!-- Price -->
                                <div class="price d-flex flex-row align-items-center">
                                    <div class="ml-2">
                                        <span class="old-price text-muted">@product.Price</span> <!-- Display old price -->
                                        <span class="new-price ml-2">@* Add your discounted price here *@</span> <!-- Display discounted price -->
                                    </div>
                                </div>
                            </div>
                            <!-- Description -->
                            <h4><p class="about font-size-lg">@product.Description</p></h4>
                            <!-- Sizes -->
                            <div class="sizes mt-5">
                                <h6 class="text-uppercase">Size</h6>
                                <!-- Add radio buttons for sizes -->
                                <label class="radio">
                                    <input type="radio" name="size" value="S" checked> <span>S</span>
                                </label>
                                <!-- Add more radio buttons for other sizes -->
                            </div>
                            <!-- Add to cart button -->
                            <div class="cart mt-4 align-items-center">
                                <button class="btn btn-danger text-uppercase mr-2 px-4">Add to cart</button>
                                <!-- Add wishlist and share buttons -->
                                <i class="fa fa-heart text-muted"></i>
                                <i class="fa fa-share-alt text-muted"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code
{
    [Inject]
    public IProductService ProductService { get; set; }

    [Parameter]
    public string? ProductId { get; set; }

    public GetProductDto product { get; set; } = new GetProductDto();

    protected async override Task OnParametersSetAsync()
    {
        if (!string.IsNullOrEmpty(ProductId))
        {
            product = await ProductService.GetById(new Guid(ProductId));
        }
    }
}
make this product detail page looks better