import logo from "./logo.svg";
import React, { useState } from "react";
import "./App.css";

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

    const onLogin = () => {
        return !(login !== "" && password.match(/\w{8,30}$/))
    };

    const Authorization = () => {
        return alert("Welcome, authorization was successful")
    }

    return (
        <div className="formBlock">
            <p>Enter login:</p>

            <input
                type="text"
                value={login}
                onChange={(e) => setLogin(e.target.value)}
            />
            <p>Enter password:</p>
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button disabled={onLogin()} onClick = {Authorization}>Log In</button>
        </div>
    );
};

const cat = [
    {
        "_id": "62d57ab8b74e1f5f2ec1a148",
        "name": "Motorola Razr 5G 8/256GB Graphite",
        "price": 3500,
    },
    {
        "_id": "62d57c4db74e1f5f2ec1a14a",
        "name": "Смартфон Google Pixel 6 Pro 12/128GB Stormy Black",
        "price": 2800,
    },
    {
        "_id": "62d58318b74e1f5f2ec1a14e",
        "name": "Microsoft Surface Duo 2 8GB/256GB",
        "price": 4500,
    },
    {
        "_id": "62d5869bb74e1f5f2ec1a150",
        "name": "Смартфон Poco F3 6/128GB EU Arctic White",
        "price": 1800,
    },
    {
        "_id": "62d58810b74e1f5f2ec1a152",
        "name": "Мобильный телефон Xiaomi Redmi Note 9 4G (Redmi 9t EU)",
        "price": 800,
    },
    {
        "_id": "62d5a7deb74e1f5f2ec1a154",
        "name": "LG V50 black REF",
        "price": 900,
      
    }
]

const rootCats = [
  {
      "name": "test3"
  },
  {
      "name": "Tools"
  },
  {
      "name": "Tomatoes"
  },
  {
      "name": "123"
  },
  {
      "name": "iPhone"
  },
  {
      "name": "Samsung"
  },
  {
      "name": "Smartphone"
  },
  {
      "name": "Large home appliances"
  },
  {
      "name": "Garden"
  },
  {
      "name": "Children's products"
  },
  {
      "name": " Hobbies and sports"
  },
  {
      "name": "Sale"
  }
]

const CategoryMenu = () => {
  return (
      <>
          <aside id='aside'>
              <ul>
                  {rootCats.map(cat => <CategoryMenuItem name={cat.name}/>)}
              </ul>
          </aside>
      </>
  );
};

const CategoryMenuItem = ({name}) => {
  return (
      <>
          <h2>{name}</h2>
      </>
  );
};



const Category = () => {
  return (
      <div className="cardBlock">
          {cat.map(item => <GoodCard name={item.name} price={item.price}/>)}
      </div>
  );
};



const GoodCard = ({name, price}) => {
  return (
      <div className='card'>
          <h3>{name}</h3>
          <h4>{price}</h4>
      </div>
  );
};

function App() {
    return (
        <div className="App">
            <LoginForm />
            <CategoryMenu />
            <Category />
        </div>
    );
}
export default App;