import {
  Button,
  Input,
  Checkbox,
  Header,
  SpaceBetween,
} from "@cloudscape-design/components";
import { useState } from "react";

export const Login = () => {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [rememberMe, setRememberMe] = useState(false);

  return (
    <SpaceBetween size="s" alignItems={"center"}>
      <Header>Login</Header>
      <Input value={userName} onChange={(e) => setUserName(e.detail.value)} />
      <Input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.detail.value)}
      />
      <Checkbox
        checked={rememberMe}
        onChange={() => setRememberMe(!rememberMe)}
      >
        Remember me
      </Checkbox>
      <Button>Login</Button>
    </SpaceBetween>
  );
};