Speech to Text Dictation

// Auto-growing, dictate-friendly textarea in React
import React, { useState, useId } from "react";

export function DictationTextArea({ label, labelTa, maxChars = 500 }) {
  const id = useId();
  const [text, setText] = useState("");

  const handleChange = (e) => {
    // Preserve dictated spaces and linebreaks during typing/speech conversion
    setText(e.target.value);
  };

  return (
    <div className="space-y-2 w-full">
      <label htmlFor={id} className="text-sm font-medium text-foreground">
        {label} <span className="font-tamil text-xs text-muted-foreground" lang="ta">{labelTa}</span>
      </label>
      
      {/* Min-height prevents clipping dictated paragraphs */}
      <textarea
        id={id}
        value={text}
        onChange={handleChange}
        className="w-full min-h-[140px] rounded-md border border-border p-3 text-sm focus:ring-2 focus:ring-primary focus:outline-none transition-all duration-200"
        placeholder="வார்த்தைகளை கூறவும் அல்லது தட்டச்சு செய்யவும்..."
      />
      
      <div className="flex justify-between text-xs text-muted-foreground">
        <span>தட்டச்சு செய்த வார்த்தைகள்: {text.split(/\s+/).filter(Boolean).length}</span>
        <span>{text.length} / {maxChars} எழுத்துக்கள்</span>
      </div>
    </div>
  );
}