"use client";

import { InputHTMLAttributes, forwardRef } from "react";
import clsx from "clsx";

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

export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
  ({ label, error, id, className, ...props }, ref) => {
    return (
      <div>
        {label && (
          <label
            htmlFor={id}
            className="block text-base font-semibold text-[#006f36] mb-3"
          >
            {label}
          </label>
        )}
        <input
          ref={ref}
          id={id}
          type="date"
          className={clsx(
            "block w-full border-2 border-[#e9e9e9] rounded-xl px-3 py-3 text-base bg-white text-black focus:border-[#006f36] focus:outline-none transition-colors",
            error && "border-red-500",
            className,
          )}
          {...props}
        />
        {error && <p className="mt-1 text-sm text-red-600">{error}</p>}
      </div>
    );
  },
);

DatePicker.displayName = "DatePicker";