"use client";

import { Bell, CheckCircle2 } from "lucide-react";
import type { LucideIcon } from "lucide-react";

function Toggle({
  done,
  urgent,
  icon: Icon,
  label,
  onToggle,
}: {
  done: boolean;
  urgent: boolean;
  icon: LucideIcon;
  label: string;
  onToggle: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onToggle}
      title={label}
      className={`relative flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-all ${
        done
          ? "bg-emerald-500/15 text-emerald-400 border border-emerald-500/30"
          : urgent
            ? "bg-red-500/15 text-red-400 border border-red-500/30 pulse-urgent"
            : "bg-neutral-700/50 text-neutral-400 border border-white/10 hover:border-white/25 hover:text-white"
      }`}
    >
      <Icon size={10} />
      {label}
    </button>
  );
}

export function NotifyToggle({
  confirmed,
  reminded,
  confirmUrgent,
  reminderUrgent,
  onToggleConfirm,
  onToggleReminder,
}: {
  confirmed: boolean;
  reminded: boolean;
  confirmUrgent?: boolean;
  reminderUrgent?: boolean;
  onToggleConfirm: () => void;
  onToggleReminder: () => void;
}) {
  return (
    <div className="flex items-center gap-1.5">
      <Toggle
        done={confirmed}
        urgent={confirmUrgent ?? !confirmed}
        icon={CheckCircle2}
        label="Подтверждение"
        onToggle={onToggleConfirm}
      />
      <Toggle
        done={reminded}
        urgent={reminderUrgent ?? false}
        icon={Bell}
        label="Напоминание"
        onToggle={onToggleReminder}
      />
    </div>
  );
}