import React from "react";
import JalaliDatePicker from "@/components/common/JalaliDatePicker";
import { nextIconData, prevIconData } from "./dataIcon";
import LoadingDate from "../LoadingDate";
import Image from "next/image";

function SecondDatePicker({
  endDate,
  loading,
  handleDisableDate,
  nextIconDatePickerF,
  nextIconDatePickerS,
  prevIconDatePickerS,
  handleEndDateChange,
}) {
  return (
    <div className="w-1/2 second hidden md:flex lg:hidden xl:flex">
      <div className="w-full relative flex justify-center">
        <JalaliDatePicker
          value={endDate}
          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
          nextIcon={
            <Image
              {...nextIconData}
              ref={nextIconDatePickerS}
              onClick={() => !loading && nextIconDatePickerF.current.click()}
            />
          }
          prevIcon={
            <Image {...prevIconData} ref={prevIconDatePickerS} id="prevIconS" />
          }
          onChange={handleEndDateChange}
          disabledDates={(e) => handleDisableDate(e)}
        />
        <LoadingDate loading={loading} />
      </div>
    </div>
  );
}

export default SecondDatePicker;
