import { Textarea } from './Textarea';
import { Stack } from '../Stack/Stack';

export function Basic() {
  return (
    <Textarea
      label="Deployment notes"
      placeholder="What changed in this release?"
      hint="Shown to your team in the deployment log."
      rows={4}
      fullWidth
      style={{ maxWidth: 420 }}
    />
  );
}

export function WithError() {
  return (
    <Textarea
      label="Reason for cancelling"
      required
      error="Tell us a little more — at least 20 characters."
      defaultValue="too slow"
      rows={3}
      fullWidth
      style={{ maxWidth: 420 }}
    />
  );
}

export function Resize() {
  return (
    <Stack gap="md" style={{ maxWidth: 420 }}>
      <Textarea label="Fixed height" resize="none" rows={2} fullWidth />
      <Textarea label="Resizable both ways" resize="both" rows={2} fullWidth />
    </Stack>
  );
}