import type { LabMetaV2 } from "@/components/labs/hooks-v2";
import { useMe } from "@/components/me-context";
import { useLocaleFunction } from "@/hooks/use-localed";
import { isTrustedUser } from "@/lib/users";
import { cn } from "@/lib/utils";
import { ExternalLinkIcon } from "lucide-react";

export default function LabExternalMaterials({
  className,
  lab,
}: {
  className?: string;
  lab: LabMetaV2;
}) {
  const t = useLocaleFunction();
  const { data: me } = useMe();

  const externalMaterials = t(lab, "external_materials")?.filter((material) => {
    if (!material.employee_only) {
      return true;
    }
    return !!me && isTrustedUser(me);
  });

  if (!externalMaterials?.length) {
    return null;
  }

  return (
    <ul className={cn("space-y-2 p-4 text-sm", className)}>
      {externalMaterials.map((material, index) => (
        <li key={index}>
          <a
            href={material.url}
            className="underline transition-colors text-muted-foreground hover:text-foreground"
            target="_blank"
          >
            <ExternalLinkIcon className="inline-flex size-3.5 mr-2 align-text-bottom" />
            {material.name}
          </a>
        </li>
      ))}
    </ul>
  );
}