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 FirstDatePicker({
  loading,
  startDate,
  disableDates,
  handleDisableDate,
  nextIconDatePickerF,
  prevIconDatePickerF,
  prevIconDatePickerS,
  handleStartDateChange,
}) {
  return (
    <div className="w-full first md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
      <JalaliDatePicker
        value={startDate}
        className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
        nextIcon={
          <Image {...nextIconData} ref={nextIconDatePickerF} id="nextIconF" />
        }
        prevIcon={
          <Image
            {...prevIconData}
            ref={prevIconDatePickerF}
            onClick={() => prevIconDatePickerS.current.click()}
          />
        }
        isFirst={true}
        onChange={handleStartDateChange}
        disabledDates={(e) => handleDisableDate(e)}
      />
      <LoadingDate loading={loading} />
    </div>
  );
}

export default FirstDatePicker;