import React from "react";
import VisitorsChart from "./components/viewstats";

export default function Stats() {
    return (
        <section dir="rtl" className="w-full h-full flex flex-col gap-6">
            <div className="flex flex-col gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
                <div className="flex gap-5">
                    <h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
                    <button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
                        آبان
                    </button>
                </div>
                <div className="flex gap-2">
                    <div className="self-end">
                        مجموع فروش: 0 تومان
                    </div>
                    <div className="flex-1">
                        <VisitorsChart />
                    </div>
                </div>
            </div>
            <div className="flex gap-5 rounded-2xl">

                <div className="flex flex-col w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
                    <div className="flex gap-5">
                        <h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
                        <button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
                            آبان
                        </button>
                    </div>
                    <div className="flex gap-2">
                        <div className="self-end">
                            مجموع فروش: 0 تومان
                        </div>
                        <div className="flex-1">
                            <VisitorsChart />
                        </div>
                    </div>
                </div>


                <div className="flex flex-col gap-2 w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
                    <div className="flex gap-5">
                        <h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
                        <button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
                            آبان
                        </button>
                    </div>
                    <div className="flex gap-2">
                        <div className="self-end">
                            مجموع فروش: 0 تومان
                        </div>
                        <div className="flex-1">
                            <VisitorsChart />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}