'use client';
import React from 'react';
type TextareaFieldProps = {
  label?: string;
  name: string;
  placeholder?: string;
  maxLength?: number;
  value?: string;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  showLimitMessage?: boolean;
  required?:boolean
};

const TextArea: React.FC<TextareaFieldProps> = ({
  label,
  name,
  placeholder,
  maxLength,
  value,
  onChange,
  showLimitMessage,
  required
}) => {
  return (
    <div className="flex flex-col gap-1 w-full">
      {label && <label htmlFor={name}>{label}</label>}
      <textarea
        id={name}
        name={name}
        value={value}
        maxLength={maxLength}
        onChange={onChange}
        placeholder={placeholder}
        required={required}
       className="border border-gray-950/50 p-5 min-h-[100px] bg-white/25 resize-none focus:outline-none focus:ring-1 focus:ring-gray-950"
      />
      {showLimitMessage && maxLength && (
        <div className="text-right text-xs text-gray-500">
          {value?.length || 0}/{maxLength} characters
        </div>
      )}
    </div>
  );
};

export default TextArea;