"use client";

import React from "react";
import { ActivityItem } from "./types";

interface ActivityListProps {
  items: ActivityItem[];
  onMoreClick: () => void;
}

export function ActivityList({ items, onMoreClick }: ActivityListProps) {
  return (
    <div className="pop-dashboard-card">
      <div className="pop-dashboard-card-header">
        <h3 className="pop-dashboard-card-title">최근 활동</h3>
        <button className="pop-dashboard-btn-more" onClick={onMoreClick}>
          전체보기
        </button>
      </div>
      <div className="pop-dashboard-activity-list">
        {items.map((item) => (
          <div key={item.id} className="pop-dashboard-activity-item">
            <span className="pop-dashboard-activity-time">{item.time}</span>
            <span className={`pop-dashboard-activity-dot ${item.category}`} />
            <div className="pop-dashboard-activity-content">
              <div className="pop-dashboard-activity-title">{item.title}</div>
              <div className="pop-dashboard-activity-desc">{item.description}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}