'use client'

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { useState } from 'react';
import Link from 'next/link';

type HeaderProps = {
  name: string; //header 이름
  backBtn: boolean; // 뒤로가기 버튼 유무
}

export default function Header({name, backBtn}: HeaderProps){
  const [headerAct, setHeaderAct] = useState<boolean>(false);

  return(
    <div className="header-warp">
      <header>
        <div className="header-inner">
          {backBtn && 
            <div className='back-button-wrap'>
              <button className='back-button'></button>
            </div>
          }
          <h2 className="logo"><Link href={"#"}>{name}</Link></h2>
          <div className="side-button-wrap">
            <button className="side-button" onClick={() => setHeaderAct(true)}></button>
          </div>
        </div>
        <div className={`side-nav ${headerAct ? 'active' : ''}`}>
          <div className="side-nav-inner">
            <div className="side-nav-header">
              <div className="side-header-profile">
                <div className="profile-img">
                  <img src="/assets/images/layout/side_nav_profile.svg" alt='profile'/>
                </div>
                <div className="profile-group"> 
                  <div className="profile-name">HONG GILDONG</div>
                  <div className="profile-company">Interplug corp.</div>
                </div>
              </div>
              <div className="side-close-wrap">
                <button className="side-close-btn" onClick={() => setHeaderAct(false)}></button>
              </div>
            </div>
              <div className="side-swiper-wrap">
                <Swiper
                  slidesPerView={1.6}
                  spaceBetween={12}
                  className="mySwiper"
                >
                  <SwiperSlide>
                    <div className='side-swiper-card'>
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">
                      私は作成した物件
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className='side-swiper-card'>
                      <div className="side-swiper-icon icon02"></div>
                      <div className="side-swiper-infor">
                      私は作成したお問 い合わせ
                      </div>
                    </div> 
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className='side-swiper-card'>
                      <div className="side-swiper-icon icon03"></div>
                      <div className="side-swiper-infor">
                        屋根材適合性確認
                      </div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              </div>
              <nav className='side-nav-wrap'>
                <ul className='side-nav-list'>
                  <li className='side-nav-item'>
                    <button>調査物件一覧</button> 
                  </li>
                  <li className='side-nav-item'>
                    <button>調査物件登録</button>
                  </li>
                  <li className='side-nav-item'>
                    <button>1:1お問い合わせ</button>
                  </li>
                  <li className='side-nav-item'>
                    <button>1:1お問い合わせ登録</button>
                  </li>
                  <li className='side-nav-item'>
                    <button>パスワードリセット</button>
                  </li>
                </ul>
              </nav>
            <div className='side-nav-footer'>
              <ul className='side-footer-list'>
                <li className='side-footer-item'>
                  <button className='bold'>LOGOUT</button>
                </li>
                <li className='side-footer-item'>
                  <button>MY ADMIN</button>
                </li>
                <li className='side-footer-item'>
                  <button>HOME</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
    </div>
  )
}