"use client";

import { useState, useTransition } from "react";
import { setEmailNotificationsEnabledAction } from "@/lib/actions/notificationPreferences";

export function EmailNotificationToggle({
  initialEnabled,
  labels,
}: {
  initialEnabled: boolean;
  labels: { title: string; text: string; label: string };
}) {
  const [enabled, setEnabled] = useState(initialEnabled);
  const [pending, startTransition] = useTransition();

  return (
    <div className="border border-white/10 rounded-2xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-1">{labels.title}</p>
      <p className="text-xs text-[var(--rk-ink-muted)] mb-3">{labels.text}</p>
      <label className="flex items-center gap-2 text-sm cursor-pointer">
        <input
          type="checkbox"
          checked={enabled}
          disabled={pending}
          onChange={(e) => {
            const next = e.target.checked;
            setEnabled(next);
            startTransition(() => setEmailNotificationsEnabledAction(next));
          }}
          className="h-4 w-4"
        />
        {labels.label}
      </label>
    </div>
  );
}