import React from "react";
import { TextArea } from "@/components/ui/TextArea";

interface BaseTextAreaFieldProps {
  label: string;
  value: string;
  setValue: (value: string) => void;
  placeholder?: string;
  rows?: number;
  className?: string;
}

export function BaseTextAreaField({
  label,
  value,
  setValue,
  placeholder = "Enter details...",
  rows = 4,
  className = ""
}: BaseTextAreaFieldProps) {
  return (
    <div className={`group sm:col-span-2 lg:col-span-4 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10 ${className}`}>
      <TextArea
        label={label}
        placeholder={placeholder}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={rows}
        textareaClass="transition-all duration-200 group-hover:border-[#428B4D]/50 group-hover:shadow-md group-hover:shadow-[#428B4D]/10"
      />
    </div>
  );
}