import { Icon, type IconName } from "@/components/icons";
import type { Service } from "@/content/services";

const map: Record<Service["icon"], IconName> = {
  recruitment: "recruitment",
  shield: "shield",
  globe: "globe",
  compass: "compass",
  users: "users",
};

export function ServiceIcon({
  icon,
  className = "",
}: {
  icon: Service["icon"];
  className?: string;
}) {
  return (
    <span
      className={`grid h-12 w-12 place-items-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-100 ${className}`}
    >
      <Icon name={map[icon]} className="h-6 w-6" />
    </span>
  );
}