"use client";

import Image from "next/image";
import Link from "next/link";
import { buildStorageUrl } from "@/components/main/BaseUrl";
import { formatBubbleTime } from "@/lib/chat/formatMessageTime";
import { useTranslation } from "react-i18next";

export interface ProfileVisitor {
  _id: string;
  user_name: string;
  first_name: string;
  last_name: string;
  profile_image?: string;
  visited_at?: string;
  visited_at_time?: string;
}

type Props = {
  visitor: ProfileVisitor;
};

export default function VisitorRow({ visitor }: Props) {
  const { t } = useTranslation("common");
  const avatarSrc = visitor.profile_image
    ? buildStorageUrl(visitor.profile_image)
    : "/images/fake-avatar.png";

  const visitedAt =
    visitor.visited_at_time ||
    (visitor.visited_at ? formatBubbleTime(visitor.visited_at) : "");

  return (
    <div className="mb-3 flex w-full items-start gap-3 border-b border-border-primary-light pb-3 last:border-0">
      <Link
        href={`/users/${visitor.user_name}`}
        className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800"
      >
        <Image
          src={avatarSrc}
          alt={visitor.user_name || t("common.user")}
          fill
          className="object-cover"
          unoptimized
        />
      </Link>

      <div className="min-w-0 flex-1 pt-0.5">
        <div className="flex items-start justify-between gap-2">
          <p className="text-sm leading-5 text-neutral-700 dark:text-neutral-200">
            <Link
              href={`/users/${visitor.user_name}`}
              className="font-bold text-neutral-900 hover:underline dark:text-white"
            >
              {visitor.user_name}
            </Link>{" "}
            {t("settings.visitor.visitedProfile")}
          </p>
          {visitedAt ? (
            <span className="shrink-0 text-[10px] text-neutral-400">
              {visitedAt}
            </span>
          ) : null}
        </div>
      </div>
    </div>
  );
}
