import { useState } from 'react';
import { Container, Card, TextInput, Title, Group } from '@mantine/core';
import { Textarea } from '@mantine/core';

import { QRCodeCanvas } from 'qrcode.react';

export default function QRCodeGenerator() {
  const [text, setText] = useState('');

  return (
    <Container
      fluid
      style={{
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: 'linear-gradient(135deg, #667eea, #764ba2)',
      }}
    >
<Card
  shadow="xl"
  padding="xl"
  radius="md"
  style={{ width: '80%', minWidth: 450, maxWidth: 500, height: '40vh', minHeight: 300, backgroundColor: 'white' }}
>

<Title order={3} align="center" mb="md">
          Generador de QR
        </Title>
        <Group grow>
          {/* Input de texto */}
          <Textarea
            placeholder="Escribe algo..."
            value={text}
            onChange={(e) => setText(e.target.value)}
            minRows={5} // Número mínimo de filas visibles
            maxRows={6} // Número máximo de filas antes de hacer scroll
            autosize
            />

          {/* Código QR generado dinámicamente */}
          <div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
            <QRCodeCanvas value={text || 'Mantine QR'} size={180} />
          </div>
        </Group>
      </Card>
    </Container>
  );
}