import { type CollectionEntry } from "astro:content";
import { serviceTags } from "@utils/service";
import { Link } from "@components/Link";

const alltags = await serviceTags();
const tags: {
  tag: string;
  href: string;
  services: CollectionEntry<"service">[];
}[] = [];
alltags.forEach(async (tag) => {
  const services = await tag.services;

  tags.push({ ...tag, services });
});

export const FooterServices = () => {
  return tags.map((tag) => {
    // const tag = await el;
    return (
      <div class="flex flex-col">
        <span class="relative p-1 px-2 hover:bg-white/5 rounded-md w-fit">
          <Link tag={tag.tag} href={`/services/${tag.href}`} />
        </span>
        {tag.services?.map((service) => (
          <small class="relative p-1 px-2 hover:bg-white/5 rounded-md w-fit">
            <Link
              tag={service.data.title}
              href={`/services/${tag.href}/${service.slug}`}
            />
          </small>
        ))}
      </div>
    );
  });
};