"use client";

import React from "react";
import styles from "./styles.module.css";
import { useState } from "react";

const Header = () => {
  const [open, setOpen] = useState(false);
  return (
    // Main Container
    <div className={styles.mainContainer}>
      {/* Organization */}
      <div className={styles.organizationContainer}>
        <div className={styles.orgContainer}>
          {/* Logo */}
          <div className={styles.logo}></div>
          <div className={styles.orgName}>
            <p>Organization</p>
            <div
              className={styles.dropdownContainer}
              onClick={() => setOpen(!open)}
            >
              {/* Dropdown */}
              {open && (
                <div className={styles.dropdown}>
                  <div>ahdas</div>
                </div>
              )}
              {/* Button */}
              <div className={styles.dropdownBtn}>
                <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>
        </div>
      </div>

      {/* Profile */}
      <div className={styles.profileContainer}></div>
    </div>
  );
};

export default Header;