"use client";

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

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

export default function TextareaWidget({ widget, value, onChange, className }: TextareaWidgetProps) {
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    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>
      )}
      <Textarea
        id={widget.id}
        placeholder={widget.placeholder}
        value={value || ""}
        onChange={handleChange}
        required={widget.required}
        readOnly={widget.readonly}
        className={cn("min-h-[80px] w-full text-sm", widget.readonly && "bg-muted/50 cursor-not-allowed")}
      />
    </div>
  );
}