import Link from "next/link";
"use client";
import useSWR from "swr";

type RecentItem = { id: string; title: string; viewedAt: string };
type NotiItem = { id: string; type: string; message: string; createdAt: string };

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export function PersonalWidgets() {
  const { data: recent } = useSWR<{ items: RecentItem[] }>("/api/me/recent", fetcher);
  const { data: notis } = useSWR<{ items: NotiItem[] }>("/api/me/notifications", fetcher);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
      <section>
        <h3 style={{ marginTop: 0 }}>최근 본 글</h3>
        <ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {(recent?.items ?? []).map((i) => (
            <li key={i.id}>
              <Link href={`/posts/${i.id}`}>{i.title}</Link>
            </li>
          ))}
          {(!recent || recent.items.length === 0) && <li>최근 본 글이 없습니다.</li>}
        </ul>
      </section>
      <section>
        <h3 style={{ marginTop: 0 }}>알림 요약</h3>
        <ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {(notis?.items ?? []).map((n) => (
            <li key={n.id}>{n.message}</li>
          ))}
          {(!notis || notis.items.length === 0) && <li>새 알림이 없습니다.</li>}
        </ul>
      </section>
    </div>
  );
}


