import { FormControl, FormField, FormLabel } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

export default function TextAreaElement({ form, element }) {
  return (
    <FormField
      control={form.control}
      name={element.name}
      render={({ field }) => (
        <FormControl>
          <div className={cn("relative", element.className)}>
            <Textarea
              className="peer placeholder:text-transparent"
              placeholder="*"
              {...field}
            />
            <FormLabel className="text-gray-500 absolute left-2 text-[0.7rem] px-1 bg-white -top-1.5 peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent duration-200">
              {element.label}
              {element.required && <span className="text-red-500">*</span>}
            </FormLabel>
          </div>
        </FormControl>
      )}
    />
  );
}