import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Rule } from "./rule";

interface ActivityProps {
  type: string;
  date: Date;
  repo: string;
  repoName: string;
  heart: string;
}

const TypeToString: Record<string, string> = {
  commit_repo: "committed to",
  delete_branch: "deleted a branch on",
  merge_pull_request: "merged a PR in",
  create_pull_request: "created a PR in",
  create_branch: "created a branch in",
  PushEvent: "committed to",
  DeleteEvent: "deleted a branch on",
  PullRequestEvent: "created or merged a PR in",
  PullRequestReviewEvent: "reviewed a PR in",
  PullRequestReviewCommentEvent: "commented on a PR in",
  IssueCommentEvent: "commented on",
  IssuesEvent: "created or updated an issue in",
  close_issue: "closed an issue in",
  create_issue: "created an issue in",
};

export const Activity = (props: ActivityProps): JSX.Element => {
  const { type, date, repo, repoName, heart } = props;
  return (
    <li className="ms-6">
      <span className="absolute flex items-center justify-center w-6 h-6 rounded-full -start-3">
        {heart}
      </span>
      <div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
        <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
          {date.toLocaleString("en-GB")}
        </time>
        <div className="text-sm font-normal text-gray-500 lex dark:text-gray-300">
          Naomi has {TypeToString[type] ?? "performed a " + type}{" "}
          <a
            href={repo}
            target="_blank"
            rel="noopener noreferrer"
            className="font-semibold text-[#abfcec] hover:underline"
          >
            {repoName}
          </a>{" "}
        </div>
      </div>
    </li>
  );
};