import { customElement as litCustomElement } from 'lit/decorators/custom-element.js';

const camelToKebab = (name: string) =>
  name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();

export function customElement(tagName: string) {
  return (classOrTarget: any, context?: any) => {
    // Set .is so that other decorators and utilities can read the tag name
    classOrTarget.is = tagName;

    // Warn if class name convention doesn't match the tag
    if (classOrTarget.name) {
      const derived = camelToKebab(classOrTarget.name);
      if (derived !== tagName) {
        console.warn(
          `[dees-element] Class "${classOrTarget.name}" kebab-cases to "${derived}" but tag is "${tagName}". ` +
          `Container queries use .is ("${tagName}").`
        );
      }
    }

    // Delegate to Lit's original decorator
    return litCustomElement(tagName)(classOrTarget, context);
  };
}