'use client';
import Link from "next/link";
import styles from "./Main.module.css";
// import useSound from 'use-sound';

export function SidebarMain<PropFormat>({currentPage, props}:{currentPage:string, props?:PropFormat}) {
  // const [openPlay] = useSound("/sfx/s_open.mp3");
  // const [impossiblePlay] = useSound("/sfx/s_impossible.mp3");
  // const [hoverPlay] = useSound("/sfx/s_hover.mp3");
  return <>
    <h1>abtmtr.link</h1>
    {/* <div className={styles.Main_Image}>
      <img src="/favicon.ico" width="128" height="128" />
    </div> */}
    <div className={styles.Main_List}>
      <Link 
        href="/" 
        className={currentPage === "/" ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage === "/" ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">home</span>
            <span>Root</span>
        </div>
      </Link>
      <Link 
        href="/chat/" 
        className={currentPage.includes("/chat/") ? styles.Main_List_CurrentLink : ""} 
        
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">chat</span>
            <span>Chat</span>
            <span className={styles.Main_List_Button_Badge}>NEW</span>
        </div>
      </Link>
      <Link 
        href="/jams/" 
        className={currentPage.includes("/jams/") ? styles.Main_List_CurrentLink : ""} 
        
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">format_paint</span>
            <span>Jams</span>
        </div>
      </Link>
      <Link 
        href="/search/" 
        className={currentPage.includes("/search/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage === "/" ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">search</span>
            <span>Search</span>
        </div>
      </Link>
      <Link 
        href="/projects/" 
        className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/projects/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">folder</span>
            <span>Projects</span>
        </div>
      </Link>
      <Link 
        href="/characters/" 
        className={currentPage.includes("/characters/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/characters/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">group</span>
            <span>Characters</span>
        </div>
      </Link>
      <Link 
        href="/blog/" 
        className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/blog/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">description</span>
            <span>Blog</span>
        </div>
      </Link>
      <Link 
        href="/gallery/" 
        className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/gallery/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">image</span>
            <span>Gallery</span>
        </div>
      </Link>
      <Link 
        href="/stories/" 
        className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/stories/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">book</span>
            <span>Stories</span>
        </div>
      </Link>
      <Link 
        href="/orgs/" 
        className={currentPage.includes("/orgs/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/orgs/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">corporate_fare</span>
            <span>Organizations</span>
        </div>
      </Link>
      <Link 
        href="/links/" 
        className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/links/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">link</span>
            <span>Links</span>
        </div>
      </Link>
      <Link 
        href="/oao/" 
        className={currentPage.includes("/oao/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/oao/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">campaign</span>
            <span>Opinions & Objections</span>
        </div>
      </Link>
      <Link 
        href="/about/" 
        className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""} 
        
        // onClick={() => currentPage.includes("/about/") ? impossiblePlay() : openPlay()}
        // onMouseEnter={hoverPlay}
      >
        <div className={`fw ${styles.Main_List_Button}`}>
            <span className="icon">info</span>
            <span>About</span>
        </div>
      </Link>
    </div>
  </>
}