import { Building2, Construction, Home, type LucideIcon } from "lucide-react";

import type { ProductSlug } from "@/lib/routes";

const brands = {
  pureestate: { accent: "#3C83DF", icon: Building2, name: "PureEstate" },
  buildpro: { accent: "#14B88A", icon: Construction, name: "BuildPro" },
  societypro: { accent: "#2E9B69", icon: Home, name: "SocietyPro" },
} satisfies Record<ProductSlug, { accent: string; icon: LucideIcon; name: string }>;

export default function ProductBrand({
  compact = false,
  slug,
}: {
  compact?: boolean;
  slug: ProductSlug;
}) {
  const brand = brands[slug];
  const Icon = brand.icon;

  return (
    <span className="flex min-w-0 items-center gap-2">
      <span
        className={`grid shrink-0 place-items-center rounded-xl text-white shadow-sm ${compact ? "h-8 w-8" : "h-9 w-9"}`}
        style={{ backgroundColor: brand.accent }}
      >
        <Icon size={compact ? 17 : 19} strokeWidth={2} />
      </span>
      <span className="truncate text-[17px] font-extrabold tracking-[-0.04em]" style={{ color: brand.accent }}>
        {brand.name}
      </span>
    </span>
  );
}