Glass Textarea

'use client';

import './GlassTextarea.css';

/**
 * GlassTextarea — A multiline text input with glassmorphism surface styling.
 * 
 * @param {string} label - Input grouping label title.
 * @param {string} id - The ID mapping the label to the textbox.
 * @param {number} rows - Starting HTML rows count height. Default is 4.
 * @param {string} placeholder - Displayed placeholder within the box when empty.
 * @param {string} name - Form data extraction name binding.
 * @param {boolean} required - HTML required indicator.
 */
export interface GlassTextareaProps { 
  label: string; 
  id: string; 
  rows?: number;
  placeholder?: string;
  name?: string;
  required?: boolean;
}

export function GlassTextarea({ label, id, rows = 4, placeholder = "Start typing...", name, required = false }: GlassTextareaProps) {
  return (
    <>
      <div className="glass-textarea-wrap" data-rk-3bd942="">
        <label htmlFor={id} className="glass-label" data-rk-3bd942="">{label}</label>
        <textarea id={id} name={name} rows={rows} placeholder={placeholder} required={required} className="glass-textarea" data-rk-3bd942=""></textarea>
      </div>
    </>
  );
}

export default GlassTextarea;

/* GlassTextarea — ported from astro-component-kit (forms/GlassTextarea.astro) */

.glass-textarea-wrap:where([data-rk-3bd942]) { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.glass-label:where([data-rk-3bd942]) { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
.glass-textarea:where([data-rk-3bd942]) { 
  width: 100%; padding: var(--sp-4, 1rem); 
  background: var(--c-bg-elev, rgba(255, 255, 255, 0.03)); 
  backdrop-filter: blur(10px); 
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); 
  border-radius: var(--r-md, 16px); 
  color: var(--c-text-1, #fff); 
  font-family: inherit; font-size: 0.9rem; 
  outline: none; transition: 0.3s; resize: vertical; 
}
.glass-textarea:focus:where([data-rk-3bd942]) { 
  border-color: rgba(99, 102, 241, 0.4); 
  background: rgba(255, 255, 255, 0.06); 
}
.glass-textarea:where([data-rk-3bd942])::placeholder { color: var(--c-text-muted, #475569); }