import React, { forwardRef } from "react";
import { CalendarDotsIcon } from "@phosphor-icons/react";

interface CustomDateTimePickerProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
  label?: string;
  error?: string;
}

const CustomDateTimePicker = forwardRef<
  HTMLInputElement,
  CustomDateTimePickerProps
>(({ label, error, className = "", disabled, required, ...props }, ref) => {
  return (
    <div className="w-full flex flex-col gap-1.5">
      {label && (
        <label className="text-sm font-semibold text-gray-700">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <div className="relative w-full">
        <input
          ref={ref}
          type="datetime-local"
          disabled={disabled}
          className={`
              w-full rounded-lg
              bg-white text-black text-sm
              border border-gray-300
              pl-10 pr-3 py-3
              outline-none
              transition-all duration-200
              hover:border-primary
              focus:border-primary focus:ring-2 focus:ring-primary/20
              disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed disabled:border-gray-200
              placeholder:text-gray-300
              ${error
              ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
              : ""
            }
              ${className}
            `}
          {...props}
        />
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
          <CalendarDotsIcon size={18} />
        </span>
      </div>
      {error && <p className="text-xs text-red-500 mt-0.5">{error}</p>}
    </div>
  );
});

export default CustomDateTimePicker;