ERP-node/frontend/components/screen/widgets/InputWidget.tsx

"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { WidgetComponent } from "@/types/screen";

interface InputWidgetProps {
  widget: WidgetComponent;
  value?: string;
  onChange?: (value: string) => void;
  className?: string;
}

export default function InputWidget({ widget, value, onChange, className }: InputWidgetProps) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e.target.value);
  };

  return (
    <div className={cn("space-y-1.5", className)}>
      {widget.label && (
        <Label htmlFor={widget.id} className="text-xs font-medium">
          {widget.label}
          {widget.required && <span className="text-destructive ml-0.5">*</span>}
        </Label>
      )}
      <Input
        id={widget.id}
        type={widget.widgetType === "number" ? "number" : "text"}
        placeholder={widget.placeholder}
        value={value || ""}
        onChange={handleChange}
        required={widget.required}
        readOnly={widget.readonly}
        className={cn("h-6 w-full text-xs", widget.readonly && "bg-muted/50 cursor-not-allowed")}
        style={{ fontSize: "12px" }}
      />
    </div>
  );
}