import React from "react";
import VisitorsChart from "./components/viewstats";
import CafePopularity from "./components/popular";
import CafeVisitPie from "./components/mostView";
import { RiArrowLeftSLine } from "react-icons/ri";
import { RiArrowDownSLine } from "react-icons/ri";
import { useState } from "react";


export default function Stats() {
    const [dropDownOpen, setDropdownOpen] = useState(false);
    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>
                    <div className="relative">
                        <button
                            onClick={() => setDropdownOpen(prev => !prev)}
                            className=" flex gap-2 justify-between items-center py-1 pe-5 ps-3 w-40 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 cursor-pointer">
                            <span>این هفته</span>
                            <RiArrowDownSLine size={20} className={`${dropDownOpen ? 'rotate-180' : ''} transition-all duration-200`} />
                        </button>
                        {dropDownOpen && (
                            <div className="absolute mt-2 bg-background text-text1 hover:text-text1 border-2 border-border rounded-lg shadow-lg w-40 z-10">
                                <ul className="flex flex-col">
                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">امروز</li>
                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این هفته</li>
                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این ماه</li>
                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این سال</li>
                                </ul>
                            </div>
                        )

                        }
                    </div>

                </div>
                <div className="flex flex-col lg:flex-row gap-2">
                    <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
                        <div className="flex gap-2 justify-center items-center">
                            <span className="w-4 h-4 bg-red-500 rounded-sm" />
                            <span>راهنما</span>
                        </div>
                        <div className="flex gap-2 justify-center items-center">
                            <span className="w-4 h-4 bg-blue-500 rounded-sm" />
                            <span>راهنما</span>
                        </div>
                    </div>
                    <div className="flex-1">
                        <VisitorsChart />
                    </div>
                </div>
            </div>
            <div className="flex flex-col lg:flex-row gap-5 rounded-2xl">

                <div className="flex flex-col w-full lg:w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
                    <div className="flex justify-between gap-5">
                        <h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
                        <span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
                            <span>همه</span>
                            <RiArrowLeftSLine />
                        </span>
                    </div>
                    <div className="flex flex-col lg:flex-row gap-2">
                        <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
                            <div className="flex gap-2 justify-center items-center">
                                <span className="w-4 h-4 bg-red-500 rounded-sm" />
                                <span>راهنما</span>
                            </div>
                            <div className="flex gap-2 justify-center items-center">
                                <span className="w-4 h-4 bg-blue-500 rounded-sm" />
                                <span>راهنما</span>
                            </div>
                        </div>
                        <div className="flex-1">
                            <CafeVisitPie />
                        </div>
                    </div>
                </div>


                <div className="flex flex-col gap-2 w-full lg:w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
                    <div className="flex justify-between gap-5">
                        <h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
                        <span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
                            <span>همه</span>
                            <RiArrowLeftSLine />
                        </span>
                    </div>
                    <div className="flex flex-col lg:flex-row gap-2">
                        <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
                            <div className="flex gap-2 justify-center items-center">
                                <span className="w-4 h-4 bg-red-500 rounded-sm" />
                                <span>راهنما</span>
                            </div>
                            <div className="flex gap-2 justify-center items-center">
                                <span className="w-4 h-4 bg-blue-500 rounded-sm" />
                                <span>راهنما</span>
                            </div>
                        </div>
                        <div className="flex-1">
                            <CafePopularity />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}