import './App.css';
import { useState } from 'react';

const MyDiv = () => {
  return (
    <div>
      Привет-привет!
      <input />
    </div>
  );
};

const TwoDivs = () => (
  <div>
    <MyDiv />
    <MyDiv />
  </div>
);

const Add = ({ a = 100, b = 1000 }) => (
  <div>
    a + b = {a} + {b} = {+a + +b}
  </div>
);

const BlockOfTextWithHeader = ({ children, title = 'No Title' }) => (
  <>
    <h2>{title}</h2>
    <p>{children}</p>
  </>
);

const arr = ['Див 1', 'Див 2'];
const data = [
  { children: '1111', title: 'адын-адын' },
  { children: '2222', title: 'два-два' },
  { children: '3333', title: 'тры-тры' },
];

const Counter = () => {
  const [count, setCount] = useState(10);
  console.log(count);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

const TextLength = ({ text }) => <h1>{text.length}</h1>;

const Input = () => {
  const [text, setText] = useState('testtest');
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value.toUpperCase())} />
      <TextLength text={text} />
    </div>
  );
};

const LoginForm = ({ onLogin }) => {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');

  const handleLoginChange = (event) => {
    setLogin(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLoginClick = () => {
    if (login && password) {
      onLogin(login, password);
    }
  };

  return (
    <div>
      <label>
        Login:
        <input type="text" value={login} onChange={handleLoginChange} />
      </label>
      <label>
        Password:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      <button onClick={handleLoginClick} disabled={!login || !password}>
        Login
      </button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <header
        className="App-header"
        style={{ cssText: 'border-radius: 50px; color: #FF0FF; font-size: 2em' }}>
        <LoginForm onLogin={(l, p) => console.log('LOGIN', l, p)} />
        <Input />
        <Counter />
        <Counter />
        {Math.random() > 0.5 ? <h1>ЗАГОЛОВОК</h1> : <code>КОД</code>}
        {arr.map((text, id) => (
          <div key={id}>{text}</div>
        ))}
        {data.map(({ children, title }, id) => (
          <BlockOfTextWithHeader key={id} children={children} title={title} />
        ))}
      </header>
    </div>
  );
}

export default App;
