Glass Textarea

---
/**
 * 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.
 */
interface Props { 
  label: string; 
  id: string; 
  rows?: number;
  placeholder?: string;
  name?: string;
  required?: boolean;
}

const { label, id, rows = 4, placeholder = "Start typing...", name, required = false } = Astro.props;
---

<div class="glass-textarea-wrap">
  <label for={id} class="glass-label">{label}</label>
  <textarea {id} {name} {rows} {placeholder} {required} class="glass-textarea"></textarea>
</div>

<style>
  .glass-textarea-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
  .glass-label { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }
  .glass-textarea { 
    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 { 
    border-color: rgba(99, 102, 241, 0.4); 
    background: rgba(255, 255, 255, 0.06); 
  }
  .glass-textarea::placeholder { color: var(--c-text-muted, #475569); }
</style>