"use client";

import React, { useState } from "react";

type FindIdDevOptionProps = {
	doneEnabled?: boolean;
	setDoneEnabled?: (enabled: boolean) => void;
	failedEnabled?: boolean;
	setFailedEnabled?: (enabled: boolean) => void;
};

export default function FindIdDevOption({
	doneEnabled,
	setDoneEnabled,
	failedEnabled,
	setFailedEnabled,
}: FindIdDevOptionProps) {
	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-100`}
			>
			</button>
			{isOpen && (
				<div className="fixed inset-0 flex items-center justify-center z-50">
					<button
						type="button"
						aria-label="옵션 닫기"
						className="absolute inset-0 bg-black/20 cursor-default"
						onClick={() => setIsOpen(false)}
					/>
					<div className="w-[500px] h-[600px] flex bg-white/80 p-10 border rounded-lg relative">
						<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">find-id done overlay</p>
								<button
									type="button"
									aria-label="find-id done overlay 토글"
									aria-pressed={!!doneEnabled}
									onClick={() => setDoneEnabled?.(!doneEnabled)}
									className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${doneEnabled ? "bg-blue-600" : "bg-gray-300"}`}
								>
									<span
										className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${doneEnabled ? "translate-x-5" : "translate-x-1"}`}
									/>
								</button>
							</li>
							<li className="flex items-center justify-between">
								<p className="mr-4">find-id failed overlay</p>
								<button
									type="button"
									aria-label="find-id failed overlay 토글"
									aria-pressed={!!failedEnabled}
									onClick={() => setFailedEnabled?.(!failedEnabled)}
									className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${failedEnabled ? "bg-blue-600" : "bg-gray-300"}`}
								>
									<span
										className={`inline-block h-5 w-5 transform rounded-full bg-white transition ${failedEnabled ? "translate-x-5" : "translate-x-1"}`}
									/>
								</button>
							</li>
						</ul>
					</div>
				</div>
			)}
		</div>
	);
}


