import React from 'react';

function toAssetName(name?: string) {
  const value = (name || 'FileText').trim();
  if (!/^[A-Z][A-Za-z0-9]*$/u.test(value)) return 'file-text';
  return value
    .replace(/([A-Z]+)([A-Z][a-z])/gu, '$1-$2')
    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')
    .toLowerCase();
}

export function TemplateCategoryIcon({ name, className = 'size-6' }: { name?: string; className?: string }) {
  const assetName = toAssetName(name);
  const url = `/learnitive-icons/lucide/${encodeURIComponent(assetName)}.svg`;
  return <span
    className={`${className} interactive-static-lucide-icon`}
    aria-hidden="true"
    style={{ WebkitMaskImage: `url("${url}")`, maskImage: `url("${url}")` }}
  />;
}