"use client";

import { useEffect, useState } from "react";

type Message = {
  id: string;
  name: string;
  email: string;
  message: string;
};

export default function MessagesPage() {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    async function load() {
      const res = await fetch("/api/messages");
      const data = await res.json();
      setMessages(data);
    }

    load();
  }, []);

  async function deleteMessage(id: string) {
    await fetch(`/api/messages/${id}`, {
      method: "DELETE",
    });

    setMessages((prev) =>
      prev.filter((m) => m.id !== id)
    );
  }

  return (
    <div className="p-10">
      <h1 className="text-2xl font-bold mb-6">
        Messages reçus
      </h1>

      <div className="space-y-4">
        {messages.map((msg) => (
          <div key={msg.id} className="border p-4 rounded">
            <p className="font-bold">{msg.name}</p>
            <p>{msg.email}</p>
            <p>{msg.message}</p>

            <button
              onClick={() => deleteMessage(msg.id)}
              className="text-red-600 mt-2"
            >
              Supprimer
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}