"use client";

import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";

type FeedDotTone = "primary" | "g" | "a" | "c" | "r";

export type FeedItem = {
  id: string | number;
  icon: LucideIcon;
  tone?: FeedDotTone;
  /** Body text (can include <b>...</b> via React node). */
  text: ReactNode;
  /** Time string (e.g., "3분 전", "오늘 14:20"). Mono font, muted color. */
  time?: ReactNode;
};

type FeedProps = {
  items: FeedItem[];
  className?: string;
};

export function Feed({ items, className = "" }: FeedProps) {
  return (
    <div className={`v5-feed ${className}`.trim()}>
      {items.map((it) => {
        const Icon = it.icon;
        const dotCls = `v5-feed-dot ${it.tone && it.tone !== "primary" ? it.tone : ""}`.trim();
        return (
          <div key={it.id} className="v5-feed-row">
            <div className={dotCls}>
              <Icon />
            </div>
            <div className="v5-feed-txt">
              {it.text}
              {it.time && <span className="tm">{it.time}</span>}
            </div>
          </div>
        );
      })}
    </div>
  );
}
