"use client";

import DateIcon from "@/shared/icons/home-page/dateIcon.svg";
import React from "react";
import LabeledDatePicker from "@/shared/components/labeled-date-picker";

type TSearchDateProps = {
  dateRangeDateFrom: Date | undefined;
  setDateRangeDateFrom: React.Dispatch<React.SetStateAction<Date | undefined>>;
  dateRangeDateTo: Date | undefined;
  setDateRangeDateTo: React.Dispatch<React.SetStateAction<Date | undefined>>;
}

const SearchDate = ({ dateRangeDateFrom, setDateRangeDateFrom, dateRangeDateTo, setDateRangeDateTo }: TSearchDateProps) => {

  return (
    <div className='flex items-center gap-6'>
      <span className="flex items-center gap-2.5">
        <DateIcon />
        <span className="font-medium text-[14px] leading-[140%] align-middle">Date</span>
      </span>
      <div className="flex items-center gap-4">
        <LabeledDatePicker
          label="From"
          dateRangeDateFrom={dateRangeDateFrom}
          setDateRangeDateFrom={setDateRangeDateFrom}
          datePickerStyle="w-[155px]"
          containerStyle="flex-row items-center"
        />
        <LabeledDatePicker
          label="To"
          dateRangeDateFrom={dateRangeDateTo}
          setDateRangeDateFrom={setDateRangeDateTo}
          datePickerStyle="w-[155px]"
          containerStyle="flex-row items-center"
        />
      </div>
    </div>
  )
}

export default SearchDate