import React from "react";
import styles from "./styles.module.css";

const Header = () => {
  return (
    // Main Container
    <nav className={styles.headerContainer}>
      {/* Logo and Org */}
      <div className={styles.logoContainer}>
        {/* Icon */}
        <div className={styles.logo}></div>
        {/* Organization and Dropdown */}
        <div className={styles.orgName}>
          {/* Header */}
          <div>
            <p>Organization</p>
          </div>
          {/* Dropdown */}
          <div className={styles.dropdown}>
            <p>Project Moonshot Inc.</p>
            <div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
              >
                <path
                  d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
                  stroke="#969AF9"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
      {/* Search */}
      <div>
        <input type="text" name="search" id="" placeholder="Search" />
      </div>
    </nav>
  );
};

export default Header;