export default function UserCard(props: Common.User, key: React.Key) {
  const [show, setShow] = useState(false);
  return (
    <>
      <div className="user" key={key} onClick={() => setShow(true)}>
        <Text>
          {props.firstName} {props.lastName}
        </Text>
        <Text>{props.email}</Text>
        <Text>{props.role}</Text>
        <Text>{props.plan}</Text>
      </div>
      {show && (
        <Modal setIsOpen={setShow}>
          <div className="user-modal flex-c">
            <Text fs-22 pb16>
              {props.firstName} {props.lastName}
            </Text>
            <Text fs-16 pb10>
              Email: {props.email}
            </Text>
            <Text fs-16 pb10>
              Plane: {props.plan}
            </Text>
            <Text fs-16 pb10>
              Role:{" "}
              <select name="role" defaultValue={props.role}>
                <option value="admin">Admin</option>
                <option value="mod">Moderator</option>
                <option value="user">User</option>
              </select>
            </Text>
            <button
              className="bgc2 pl16 pr16 pt4 pb4 no-border fs-20 cw br-40"
              onClick={() => setShow(false)}
            >
              Update
            </button>
          </div>
        </Modal>
      )}
    </>
  );
}