use leptos::prelude::*;

#[component]
pub fn DemoChartJs() -> impl IntoView {
    view! {
        <script src="/components/chart_js.js" />

        <div class="p-6 w-full max-w-4xl rounded-2xl shadow-lg bg-card">
            <div class="flex justify-between items-center mb-4">
                <h1 class="text-xl font-semibold text-gray-800">Order Report</h1>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-600">12, Mar 24 - 31, Mar 24</span>
                    <button class="px-2 py-1 text-white bg-blue-500 rounded-lg hover:bg-blue-600">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="w-5 h-5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M16.5 9.5L12 14l-4.5-4.5"
                            />
                        </svg>
                    </button>
                </div>
            </div>
            <canvas id="orderReportChart" class="w-full h-80"></canvas>
        </div>
    }
}