import { formatDate } from 'utils';
import timeAgo from 'utils/time-ago';

type ActivityItem = {
  id: string;
  text: string;
  user: {
    name: string;
    email: string;
  };
  timestamp: string;
};

interface ActivityLogItemProps {
  data: ActivityItem;
}

const ActivityLogItem = ({ data }: ActivityLogItemProps) => {
  return (
    <div className="fz14">
      <div className="flex justifyBetween">
        <div className="spacing2">
          <span className="bold">{data.user.name}</span>
          <span className="c-gray">{data.user.email}</span>
        </div>
        <div className="fz12 c-gray" title={formatDate(data.timestamp)}>
          {timeAgo(data.timestamp)}
        </div>
      </div>
      <div>{data.text}</div>
    </div>
  );
};
export const ActivityList = ({ data }: { data?: ActivityItem[] }) => {
  if (data?.length) {
    return (
      <div className="spacingY2">
        {data.map((event) => {
          return <ActivityLogItem data={event} key={event.id} />;
        })}
      </div>
    );
  } else {
    return null;
  }
};