'use client';

import dayjs from 'dayjs';
import { useParams } from 'next/navigation';
import 'dayjs/locale/ja';
import 'dayjs/locale/es';
import 'dayjs/locale/zh';
import 'dayjs/locale/ko';
import 'dayjs/locale/en';
import styles from '@/styles/main/postCard.module.scss';
import { useEffect, useState } from 'react';
import classNames from 'classnames';

function PostCard() {
	const { lng } = useParams() as { lng: string };
	const [defaultBrowserLang, setDefaultBrowserLang] = useState<string>(''); // 사용자의 브라우저 언어
	const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false); // 언어 변경 안내문 오픈 여부

	const [isButton, setIsButton] = useState<boolean>(false);

	useEffect(() => {
		setDefaultBrowserLang(navigator.language.substring(0, 2));
	}, []);

	useEffect(() => {
		if (defaultBrowserLang && lng) {
			if (defaultBrowserLang !== lng) {
				setIsGuideOpen(true);
			} else {
				setIsGuideOpen(false);
			}
		}
	}, [defaultBrowserLang, lng]);

	return (
		<div className={styles.postCardWrap}>
			<dl>
				<dt>포스트 카드 타이틀</dt>
				<dd>
					<button
						onClick={() => setIsButton((prev) => !prev)}
						className={classNames(isButton ? styles.test1 : styles.test2)}
					>
						true
					</button>
				</dd>
				<dd className={classNames(isGuideOpen ? styles.block : styles.none)}>
					언어가 다릅니다.
				</dd>
			</dl>
		</div>
	);
}

export default PostCard;