interface Activity {
  id: number;
  activityType: string;
  description: string;
  performedBy: string;
  createdAt: string;
}

interface Props {
  activity: Activity;
}

export default function ActivityCard({
  activity,
}: Props) {
  function getIcon(type: string) {
    switch (type) {
      case "CREATED":
        return "🆕";

      case "WORKFLOW_CHANGED":
        return "🔄";

      case "DOCUMENT_UPLOADED":
        return "📎";

      case "DOCUMENT_DELETED":
        return "🗑️";

      case "REPORT_ADDED":
        return "📝";

      case "CLOSED":
        return "✅";

      default:
        return "📌";
    }
  }

  return (
    <div className="relative pl-12">
      <div className="absolute left-0 top-1 flex h-9 w-9 items-center justify-center rounded-full bg-[#1296E8]/10 text-lg">
        {getIcon(activity.activityType)}
      </div>

      <div className="rounded-xl border border-slate-200 bg-white p-4">
        <h4 className="font-semibold text-slate-900">
          {activity.activityType.replaceAll(
            "_",
            " "
          )}
        </h4>

        <p className="mt-1 text-slate-600">
          {activity.description}
        </p>

        <div className="mt-3 flex items-center justify-between text-xs text-slate-400">
          <span>
            By {activity.performedBy}
          </span>

          <span>
            {new Date(
              activity.createdAt
            ).toLocaleString()}
          </span>
        </div>
      </div>
    </div>
  );
}