import { useAutoSave } from '../../../hooks/useAutoSave';
import styles from '../RightPanel.module.css';

interface Props {
  value: string;
  label: string;
  placeholder?: string;
  onSave: (value: string) => void;
  rows?: number;
}

export function AutoSaveTextArea({ value, label, placeholder, onSave, rows = 4 }: Props) {
  const [local, handleChange] = useAutoSave(value, onSave);
  return (
    <div>
      <label className={styles.label}>{label}</label>
      <textarea
        className={styles.textarea}
        value={local}
        placeholder={placeholder}
        rows={rows}
        onChange={e => handleChange(e.target.value)}
      />
    </div>
  );
}