"use client";

import { CheckCircle2, User } from "lucide-react";
import { useEffect } from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { useMarketTelemetry } from "@/lib/hooks/use-telemetry";

interface SellerInfoProps {
  sellerId: number;
  sellerName: string;
  sellerImage?: string | null;
  verified?: boolean;
  serverName: string;
  listingId: number;
}

export function SellerInfo({
  sellerId,
  sellerName,
  sellerImage,
  verified = false,
  serverName,
  listingId,
}: SellerInfoProps) {
  const { trackCustomEvent } = useMarketTelemetry();

  // Tracking de visualização de vendedor
  useEffect(() => {
    trackCustomEvent("seller_profile_viewed", listingId, {
      seller_id: sellerId,
      seller_name: sellerName,
    });
  }, [sellerId, sellerName, listingId, trackCustomEvent]);

  // Gerar iniciais do nome
  const getInitials = (name: string) => {
    return name
      .split(" ")
      .slice(0, 2)
      .map((word) => word.charAt(0).toUpperCase())
      .join("");
  };

  return (
    <div className="flex items-center gap-2">
      <Avatar className="h-10 w-10">
        {sellerImage ? (
          <img src={sellerImage} alt={sellerName} />
        ) : (
          <AvatarFallback className="bg-muted text-xs">
            {getInitials(sellerName)}
          </AvatarFallback>
        )}
      </Avatar>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium truncate">{sellerName}</span>
          {verified && (
            <Badge variant="secondary" className="h-4 px-1.5 text-xs">
              <CheckCircle2 className="h-3 w-3 mr-1" />
              Verificado
            </Badge>
          )}
        </div>
        <div className="flex items-center gap-1 text-xs text-muted-foreground">
          <User className="h-3 w-3" />
          <span className="truncate">{serverName}</span>
        </div>
      </div>
    </div>
  );
}