import type { Engagement } from "../../types/engagement";


interface ActivityListItemProps {
  engagement: Engagement;
}

function FormatDate(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  }).format(date);
}

export default function ActivityListItem({ engagement }: ActivityListItemProps) {
  return <>
    <li className="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150 flex justify-between items-center">
      <p className="text-sm md:text-base text-gray-800">
        {engagement.Message}
      </p>
      <p className="text-xs md:text-sm text-gray-600 w-fit shrink-0">
        {FormatDate(new Date(engagement.Created))}
      </p>
    </li>
  </>;
}