"use client";

import { useState } from "react";

type RegisterOptionProps = {
	doneOpen?: boolean;
	setDoneOpen?: (enabled: boolean) => void;
	codeErrorModalEnabled?: boolean;
	setCodeErrorModalEnabled?: (enabled: boolean) => void;
};

export default function RegisterOption({
	doneOpen,
	setDoneOpen,
	codeErrorModalEnabled,
	setCodeErrorModalEnabled,
}: RegisterOptionProps) {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<div>
			<button
				type="button"
				onClick={() => setIsOpen(!isOpen)}
					className={`fixed bottom-2 right-2 bg-red-400 cursor-pointer rounded-full w-[40px] h-[40px] shadow-xl z-1000`}
			/>
			{isOpen && (
					<div className="fixed inset-0 flex items-center justify-center z-1000">
						<button
							type="button"
							aria-label="옵션 닫기"
							className="absolute inset-0 bg-black/20 cursor-default"
							onClick={() => setIsOpen(false)}
						/>
						<div className="relative w-[500px] h-[600px] flex bg-white/80 p-10 border rounded-lg shadow-xl">
							<button
								type="button"
								aria-label="옵션 닫기"
								onClick={() => setIsOpen(false)}
								className="absolute top-3 right-3 w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700 flex items-center justify-center"
							>
								<span className="text-sm">✕</span>
							</button>
						<ul className="flex flex-col gap-4">
							<li className="flex items-center justify-between">
								<p className="mr-4">register done</p>
								<button
									type="button"
									aria-label="register done 토글"
									aria-pressed={!!doneOpen}
									onClick={() => setDoneOpen?.(!doneOpen)}
									className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${doneOpen ? "bg-blue-600" : "bg-gray-300"}`}
								>
									<span
										className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${doneOpen ? "translate-x-5" : "translate-x-1"}`}
									/>
								</button>
							</li>
							<li className="flex items-center justify-between">
								<p className="mr-4">register code error modal</p>
								<button
									type="button"
									aria-label="register code error modal 토글"
									aria-pressed={!!codeErrorModalEnabled}
									onClick={() => setCodeErrorModalEnabled?.(!codeErrorModalEnabled)}
									className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${codeErrorModalEnabled ? "bg-blue-600" : "bg-gray-300"}`}
								>
									<span
										className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${codeErrorModalEnabled ? "translate-x-5" : "translate-x-1"}`}
									/>
								</button>
							</li>
						</ul>
					</div>
				</div>
			)}
		</div>
	);
}

