"use client";
import { useTranslations } from "next-intl";
import FormDate from "@/shared/form-controls/FormDate";
import { CheckoutFormValues } from "@/interfaces/types";
import { UseFormReturn } from "react-hook-form";
import FormSelectShippingTimes from "./FormSelectShippingTimes";
import dayjs from "dayjs";

export default function DateAndTimeForm() {
  const t = useTranslations("");

  return (
    <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 p-6">
      <div className="flex items-center gap-2 mb-6">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-calendar *:stroke-primary"
        >
          <path d="M8 2v4"></path>
          <path d="M16 2v4"></path>
          <rect width="18" height="18" x="3" y="4" rx="2"></rect>
          <path d="M3 10h18"></path>
        </svg>
        <h3 className="text-xl">{t("Text.date_time")} </h3>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <FormDate
          name="date"
          label="date"
          placeholder="date"
          maxDate=""
          minDate={dayjs(new Date()).format("YYYY-MM-DD")}
        />
        <FormSelectShippingTimes
          name="shipping_time"
          label="shipping_time"
          placeholder="shipping_time"
        />
      </div>
    </div>
  );
}