import moment from 'moment';
import { useState } from 'react';
import { BoxContainer1 } from './day-status-box-container1';
import { BoxContainer2 } from './day-status-box-container2';
import { HomeBannerList } from './home-banner-list';
import { HomeNoticeList } from './home-notice-list';
import { useTranslation } from 'react-i18next'; 

export const DayStatusBox = () => {
  const { t } = useTranslation();
  const [tabActive, setTabActive] = useState<1 | 2>(1);

  return (
    <>
      <div className="day-status">
        <div className="day-tab">
          <div>{ moment().format('YYYY.MM.DD') }</div>
          <div>
            <button
              className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` }
              onClick={ () => setTabActive(1) }
            >{t('home.daily')}</button>
            <button
              className={ `day-tab-btn ${(tabActive===2)? 'active': ''}` }
              onClick={ () => setTabActive(2) }
            >{t('home.monthly')}</button>
          </div>
        </div>
        <div className={ `con-box one ${(tabActive===1)? 'active': ''}` }>
          { <BoxContainer1></BoxContainer1> }
        </div>
        <div className={ `con-box two ${(tabActive===2)? 'active': ''}` }>
          { <BoxContainer2></BoxContainer2> }
        </div>
        { <HomeBannerList></HomeBannerList> }
        { <HomeNoticeList></HomeNoticeList> }
      </div>
    </>
  );
};