import { h, type Component } from "vue";
import { Icon } from "@iconify/vue";

export const iconNames = {
  mail: "heroicons-solid:envelope",
  document: "heroicons-solid:document-text",
  code: "heroicons-solid:code-bracket",

  chevronRightIcon: "heroicons-solid:chevron-right",
  chevronLeftIcon: "heroicons-solid:chevron-left",

  arrowRight: "heroicons-solid:arrow-right",
  arrowLeft: "heroicons-solid:arrow-left",
  arrowUp: "heroicons-solid:arrow-up",
  external: "heroicons-solid:arrow-top-right-on-square",
  phone: "heroicons-solid:phone",
  location: "heroicons-solid:map-pin",
  check: "heroicons-solid:check-circle",
  plus: "heroicons-solid:plus",

  user: "heroicons-solid:user",
  home: "mdi:home",
  share: "heroicons-solid:share",
  clipboard: "heroicons-solid:clipboard-document",
  link: "heroicons-solid:link",
  chat: "heroicons-solid:chat-bubble-left-right",
  close: "heroicons-solid:x-mark",

  instagram: "mdi:instagram",
  facebook: "mdi:facebook",
  tiktok: "ic:baseline-tiktok",
} as const;

export type IconName = keyof typeof iconNames;

export function useIcons(): Record<IconName, Component> {
  const registry = {} as Record<IconName, Component>;

  for (const name of Object.keys(iconNames) as IconName[]) {
    registry[name] = {
      name: `${name}Icon`,
      render() {
        return h(Icon, {
          icon: iconNames[name],
        });
      },
    };
  }

  return registry;
}