import { memo } from "react";
import { Input } from "./ui/input";
import { Skeleton } from "./ui/skeleton";
import { LucideIcon } from "lucide-react";

const AppInput = memo(function AppInput({
  inputValue,
  inputOnChange,
  inputIcon,
  inputPlaceholder,
  inputDir,
  disabled,
  type,
  inputTitle,
  loading, // New prop
  onKeyDown,
  className,
  inputRef, // New prop to forward ref to input
  inputOnFocus,
  inputOnBlur,
  inputTitleFontSize,
  iconProps, // New prop for icon customization
}: {
  inputValue: string;
  inputOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  inputIcon?: LucideIcon | string;
  inputPlaceholder: string;
  type?: string;
  inputDir?: string;
  disabled?: boolean;
  inputTitle: string;
  loading?: boolean; // New prop
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
  className?: string;
  inputRef?: React.RefObject<HTMLInputElement>; // New prop type
  inputOnFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  inputOnBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  inputTitleFontSize?: string;
  iconProps?: {
    size?: number;
    color?: string;
    strokeWidth?: number;
    className?: string;
  }; // New prop for icon customization
}) {
  return (
    <div className={`w-full flex flex-col ${inputTitle ? "gap-2" : "gap-0"}`}>
      <p
        className={`${inputTitleFontSize || "text-R14"} text-foreground dark:text-gray-200`}
      >
        {inputTitle}
      </p>
      {loading ? (
        <Skeleton className="w-full h-[48px]" /> // Display skeleton when loading
      ) : (
        <Input
          iconSrc={typeof inputIcon === "string" ? inputIcon : undefined}
          iconComponent={inputIcon}
          iconProps={iconProps}
          dir={inputDir || "ltr"}
          type={type || "text"}
          placeholder={inputPlaceholder}
          value={inputValue}
          onChange={inputOnChange}
          disabled={disabled}
          onKeyDown={onKeyDown}
          className={className}
          ref={inputRef}
          onFocus={inputOnFocus}
          onBlur={inputOnBlur}
        />
      )}
    </div>
  );
});

export default AppInput;