'use client';

import './style.scss';
import { useState, useEffect } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import NavTab from '@/app/support/navTab';
import Pagination from '@/app/component/Pagination';

export default function View() {
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(true);

	const [type, setType] = useState<string|null>(null);
	const [keyword, setKeyword] = useState<string>('');
	const [total, setTotal] = useState<number>(0);
	const [page, setPage] = useState<number>(1);
	// const [logs, setLogs] = useState<LoginLog[]>([]);


	useEffect(() => {

	}, []);


	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setLoading(true);

		// const formData = new FormData(e.currentTarget);
		// const data = Object.fromEntries(formData.entries()) as LoginLog;

	};

	return (
		<>
			<NavTab currentTab='faq' />

			{/* 자주 묻는 질문(FAQ) */}
			<section id='faq'>
				<p>자주 묻는 질문</p>

				<form onSubmit={(e) => handleSubmit(e)} autoComplete='off'>
					<dl>
						<dt>
							<input type='search' value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder='궁금한 점을 검색해 보세요.'/>
							<button type='submit' className='btn btn-default'>검색</button>
						</dt>
						<dd>
							<ul>
								<li className='active'>
									<button type='button' onClick={() => setType('all')}>전체</button>
								</li>
								<li>
									<button type='button' onClick={() => setType('general')}>일반</button>
								</li>
								<li>
									<button type='button' onClick={() => setType('account')}>계정</button>
								</li>
								<li>
									<button type='button' onClick={() => setType('payment')}>결제</button>
								</li>
								<li>
									<button type='button' onClick={() => setType('security')}>보안</button>
								</li>
							</ul>
						</dd>
					</dl>
				</form>

				<br/>
				<hr />

				<Accordion id='questions' type='single' collapsible>
					<AccordionItem value='item-1'>
						<AccordionTrigger>Ｑ. ASDASDASD</AccordionTrigger>
						<AccordionContent>
							Ａ. Yes. It adheres to the WAI-ARIA design pattern.
						</AccordionContent>
					</AccordionItem>
				</Accordion>

				<br />

				<article className='pagination'>
					<Pagination total={total} page={page} onPageChange={setPage} />
				</article>
			</section>
		</>
	);
}