'use client';

import { FC } from 'react';
import { Card } from '@/components/common';
import type { DashboardActivity } from '@/types';
import styles from './RecentActivity.module.scss';

export interface RecentActivityProps {
  activities: DashboardActivity[];
}

export const RecentActivity: FC<RecentActivityProps> = ({ activities }) => {
  return (
    <Card title="最近活动" className={styles.recentActivity}>
      <div className={styles.recentActivity__list}>
        {activities.map((activity) => (
          <div key={activity.id} className={styles.recentActivity__item}>
            <div className={styles.recentActivity__icon}>{activity.icon}</div>
            <div className={styles.recentActivity__content}>
              <div className={styles.recentActivity__title}>{activity.title}</div>
              <div className={styles.recentActivity__description}>{activity.description}</div>
            </div>
            <div className={styles.recentActivity__time}>{activity.timestamp}</div>
          </div>
        ))}
      </div>
    </Card>
  );
};
