import { MoreHorizontal } from "lucide-react";
import type { NotificationItem as Notification } from "@/app/(dashboard)/notifications/notification.types";
import { formatNotificationTime } from "../utils/formatNotificationTime";

export function NotificationItem({
  notification,
  onClick,
}: {
  notification: Notification;
  onClick: (notification: Notification) => void;
}) {
  return (
    <button
      type="button"
      onClick={() => onClick(notification)}
      className="group relative flex w-full cursor-pointer gap-3 p-4 text-left transition hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <div className="flex-1">
        <p className="text-sm font-medium">{notification.title}</p>
        <p className="mt-1 text-sm text-gray-600 dark:text-zinc-300">
          {notification.message}
        </p>
        <p className="mt-1 text-xs text-blue-600">
          {formatNotificationTime(notification.created_at)}
        </p>
      </div>
      {!notification.is_read && (
        <div className="mt-5 h-3 w-3 shrink-0 rounded-full bg-blue-500" />
      )}
      <MoreHorizontal
        size={18}
        className="absolute top-4 right-2 hidden group-hover:block"
      />
    </button>
  );
}