"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-2", className)}>
      {widget.label && (
        <Label htmlFor={widget.id} className="text-sm font-medium">
          {widget.label}
          {widget.required && <span className="ml-1 text-red-500">*</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("w-full", widget.readonly && "cursor-not-allowed bg-gray-50")}
      />
    </div>
  );
}
