import { useState } from "react";

export default function NotificationSetting() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div className="p-4 bg-gray-700 text-white rounded-lg">
            <label className="flex items-center space-x-3 cursor-pointer">
                <input
                    type="checkbox"
                    checked={enabled}
                    onChange={() => setEnabled(!enabled)}
                    className="hidden"
                />
                <span className={`w-10 h-5 flex items-center bg-gray-600 rounded-full p-1 
                    transition duration-300 ease-in-out ${enabled ? "bg-green-500" : "bg-gray-600"}`}>
                    <span className={`bg-white w-4 h-4 rounded-full shadow-md transform 
                        transition duration-300 ease-in-out ${enabled ? "translate-x-5" : ""}`} />
                </span>
                <span>{enabled ? "Notifications Enabled" : "Notifications Disabled"}</span>
            </label>
        </div>
    );
}