"use client";

import AppHeader from "@comp/AppHeader/page";
import AppContext from "@ctx/AppContext";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";

import BottomSheetCreateShifts from "plugins/BottomSheet/BottomSheetCreateShifts";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";

const Shifts = (props) => {
  const CTX = useContext(AppContext);
  const router = useRouter();

  useEffect(() => {
    CTX.GetShifts();
  }, []);

  return (
    <>
      <div className="pb-20">
        <AppHeader
          title="شیفتــــ های مجموعه"
          sub="شما 12 نفر شیفت متفاوت دارید"
          icon1={true}
          iconName1="PLUS"
          iconHref1="#"
          iconEvent1={() => {
            CTX.setBottomSheetCreateShiftsOpen(true);
          }}
          icon2={true}
          iconName2="ARROW"
          iconHref2="/home"
          iconEvent2={() => {
            return undefined;
          }}
        />

        <div className="bg-primary-300 flex  whitespace-nowrap rtl p-3">
          <Link
            href={"/shifts/manage-shift"}
            className=" bg-white rounded-3xl p-5 inline-block w-fit relative top-[-32px] mx-2"
          >
            <div>
              <h2> شیفت هفته </h2>

              <div className="flex justify-end">
                <div className="w-10 h-5 rounded-full bg-secondary-200 opacity-30"></div>
              </div>
            </div>
          </Link>
          <Link
            href={"/shifts/manage-shift"}
            className=" bg-white rounded-3xl p-5 inline-block w-fit relative top-[-32px]"
          >
            <div>
              <h2>
                {" "}
                شیفت بعدی
                <strong> هفته بعد </strong>
              </h2>
              <div className="flex justify-end">
                <div className="w-5 h-5 rounded-full bg-secondary-100 opacity-30"></div>
              </div>{" "}
            </div>
          </Link>
        </div>

        <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl mt-2"></div>
      </div>
    </>
  );
};

export default Shifts;