import { useEffect, useState } from "react";
import { Building2 } from "lucide-react";
import { getCurrentUserProjectId, getCurrentUserRole } from "../../../api/auth";
import { fetchProject } from "../../../api/projects";

interface Project {
  id: string;
  name: string;
}

export default function ProjectBadge() {
  const [project, setProject] = useState<Project | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadProject = async () => {
      const projectId = getCurrentUserProjectId();
      const role = getCurrentUserRole();

      if (role?.toUpperCase() !== 'ADMIN' && projectId) {
        try {
          const projectData = await fetchProject(projectId);
          setProject(projectData);
        } catch (err) {
          console.error("Error loading user project:", err);
        }
      }
      setLoading(false);
    };

    loadProject();
  }, []);

  if (loading || !project) {
    return null;
  }

  return (
    <div className="flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 rounded-lg text-sm">
      <Building2 size={16} className="text-blue-600" />
      <span className="text-blue-900 font-medium">
        Proyecto: <span className="font-semibold">{project.name}</span>
      </span>
    </div>
  );
}