import React, { memo } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

/**
 * ⚡ Optimization: Memoized UniversalInput
 * Wrapping in React.memo prevents redundant re-renders of input fields
 * when parent forms re-render due to other field changes.
 */
export const UniversalInput = memo(({
  label,
  name,
  value,
  onChange,
  type = "text",
  isTextarea = false,
  required = false,
}: {
  label: string;
  name: string;
  value: string;
  onChange: (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => void;
  type?: string;
  isTextarea?: boolean;
  required?: boolean;
}) => {
  return (
    <div>
      <Label htmlFor={name}>{label}</Label>
      {isTextarea ? (
        <Textarea
          id={name}
          name={name}
          value={value}
          onChange={onChange}
          required={required}
        />
      ) : (
        <Input
          id={name}
          name={name}
          type={type}
          value={value}
          onChange={onChange}
          required={required}
        />
      )}
    </div>
  );
});

UniversalInput.displayName = "UniversalInput";