Textarea

'use client';

import * as React from 'react';
import { Textarea } from './textarea';

const LINES = [
  'Lunia DS is a motion-first design system.',
  'Every component ships for React and Vue.',
  'Motion tokens keep timing the same everywhere.',
];
const TYPE_MS = 24;
const LIMIT = 500;

export default function TextareaDemo({ replay = 0 }: { replay?: number }) {
  const [description, setDescription] = React.useState('');
  const [feedback, setFeedback] = React.useState('');

  React.useEffect(() => {
    if (replay === 0) return;
    setDescription('');
    // Types three lines, one letter at a time, so the field grows line by line.
    const full = LINES.join('\n');
    const timers = [...full].map((_, i) =>
      window.setTimeout(() => setDescription(full.slice(0, i + 1)), (i + 1) * TYPE_MS),
    );
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="grid w-full max-w-md gap-6">
      <Textarea
        label="Description"
        required
        autoGrow
        rows={4}
        maxRows={8}
        placeholder="Enter a description..."
        helpText="People see this on your project page."
        value={description}
        onValueChange={setDescription}
        hint="Tell people what this project is about."
      />
      <Textarea
        label="Feedback"
        size="md"
        placeholder="What can we do better?"
        maxLength={LIMIT}
        value={feedback}
        onValueChange={setFeedback}
        // A live count is not a new hint, so it is passed as an element and does not replay the hint entrance.
        hint={<span>{LIMIT - feedback.length} characters left.</span>}
      />
      <Textarea
        label="Summary"
        invalid
        defaultValue="Too short."
        hint="Enter a description of at least 20 characters."
      />
    </div>
  );
}