"use client";

import { useState } from "react";
import { markMessageAsReadAction, deleteMessageAction } from "./actions";
import { Trash2, Loader2, MailCheck } from "lucide-react";
import { useRouter } from "@/i18n/routing";

export function MarkReadButton({ id }: { id: string }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  async function handleMark() {
    setLoading(true);
    await markMessageAsReadAction(id);
    router.refresh();
    setLoading(false);
  }

  return (
    <button
      onClick={handleMark}
      disabled={loading}
      className="p-2 text-muted-foreground hover:text-blue-500 hover:bg-blue-500/10 rounded-lg transition-colors disabled:opacity-50"
      title="Mark as read"
    >
      {loading ? <Loader2 size={16} className="animate-spin" /> : <MailCheck size={16} />}
    </button>
  );
}

export function DeleteMessageButton({ id }: { id: string }) {
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    if (confirm("Delete this message permanently?")) {
      setLoading(true);
      await deleteMessageAction(id);
      setLoading(false);
    }
  }

  return (
    <button
      onClick={handleDelete}
      disabled={loading}
      className="p-2 text-muted-foreground hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors disabled:opacity-50"
      title="Delete message"
    >
      {loading ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
    </button>
  );
}
