import { useState } from 'react';
import { Link } from 'react-router-dom';

import Button from '../../components/common/button/Button';

import { Title, BtnWrapper, ButtonClose, ModalText, TabItem, TabScroll, TabWrapper } from '../../styles/Components';
import { styled } from 'styled-components';

import Modal from '../../components/common/modal/Modal';

import { useNavigate } from 'react-router-dom';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';

import CreditContent from '../../components/IndexManage/CreditContent';
import VBPContent from '../../components/IndexManage/VBPContent';
import ItemContent from '../../components/IndexManage/ItemContent';
import InstanceContent from '../../components/IndexManage/InstanceContent';
import DecoContent from '../../components/IndexManage/DecoContent';
import { withAuth } from '../../hooks/hook';
import { authType } from '../../assets/data';
import { TabEconomicIndexList, TabGameLogList } from '../../assets/data/options';

const EconomicIndex = () => {
	const [activeTab, setActiveTab] = useState('CURRENCY');

	const handleTab = (e, content) => {
		e.preventDefault();
		setActiveTab(content);
	};
	return (
		<>
			<Title>경제 지표</Title>
			<TabScroll>
				<TabWrapper>
					{TabEconomicIndexList.map((el, idx) => {
						return (
							<li key={idx}>
								<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
									{el.name}
								</TabItem>
							</li>
						)
					})}
				</TabWrapper>
			</TabScroll>
			{activeTab === 'CURRENCY' && <CreditContent />}
			{/*{activeTab === 'vbp' && <VBPContent />}*/}
			{/*{activeTab === 'item' && <ItemContent />}*/}
			{/*{activeTab === 'instance' && <InstanceContent />}*/}
			{/*{activeTab === 'deco' && <DecoContent />}*/}
		</>
	);
};

export default withAuth(authType.economicIndicatorsRead)(EconomicIndex);