import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import React from "react";
import SideBarProfile from "../component/SideBarProfile/page";

const page = () => {
  return (
    <>
      <Navbar theme={1} />
      <div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5  rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
        <SideBarProfile />

        <div className="lg:col-span-3 xl:col-span-4 ">
          <div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
            <p className="mb-0 font-bold">سابقه سفارشات</p>

            <div className="flex rounded-xl bg-gray-300 mt-3 w-fit p-2 ">
              <div className="bg-primary-500 py-2 rounded-xl xs:px-2 lg:px-5">
                <p className="mb-0 text-white xs:text-sm lg:text-base"> جاری</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">تحویل شده</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">مرجوع شده</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">لغو شده</p>
              </div>
            </div>

            <div className="flex justify-center my-[100px]">
              <p className="mb-0  rounded-full w-fit shadow bg-white p-5 ">
                شما سفارشی ندارید
              </p>
            </div>
            <div className="overflow-x-auto">
              <table
                className="table-auto w-full bg-white border-collapse rounded-lg"
                dir="rtl"
              >
                <thead>
                  <tr className="bg-gray-300 ">
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase  border-b py-5">
                      قیمت{" "}
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      تاریخ سفارش
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      تاریخ تحویل
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      مرحله سفارش
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      عملیات
                    </th>
                  </tr>
                </thead>
                <tbody className="text-gray-600 text-sm">
                  <tr className="border-b">
                    <td className="px-4 py-3">
                      {" "}
                      <PersianNumber number={3521152} />{" "}
                    </td>
                    <td className="px-4 py-3">1402/8/12</td>
                    <td className="px-4 py-3">1402/8/16</td>
                    <td className="px-4 py-3 text-green-500 font-semibold">
                      در حال بسته بندی
                    </td>

                    <td className="px-4 py-3 text-green-500 font-semibold">
                      <button className="btn btn-outline-primary !py-1 rounded-xl text-sm">
                        مشاهده سفارش
                      </button>{" "}
                    </td>
                  </tr>
                  <tr className="border-b bg-gray-50">
                    <td className="px-4 py-3">جین دو</td>
                    <td className="px-4 py-3">۲۵</td>
                    <td className="px-4 py-3">jane@example.com</td>
                  </tr>
                  {/* Add more rows as needed */}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;