class SkillChip extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['name', 'color'];
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  getColorClasses(color) {
    const colorMap = {
      blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/20' },
      indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400', border: 'border-indigo-500/20' },
      purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/20' },
      pink: { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/20' },
      green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20' },
      yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/20' },
      red: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/20' },
      orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/20' },
      cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/20' },
      emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
      slate: { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/20' },
      default: { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/20' }
    };
    
    return colorMap[color] || colorMap.default;
  }

  render() {
    const name = this.getAttribute('name') || '';
    const color = this.getAttribute('color') || 'slate';
    const colors = this.getColorClasses(color);

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          animation: fadeIn 0.5s ease-out both;
        }
        
        .chip {
          padding: 0.375rem 0.875rem;
          border-radius: 9999px;
          font-size: 0.875rem;
          font-weight: 500;
          transition: all 0.3s ease;
          cursor: default;
          border-width: 1px;
          backdrop-filter: blur(4px);
        }
        
        .chip:hover {
          transform: translateY(-2px);
          filter: brightness(1.2);
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(0.8);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
      </style>
      
      <span class="chip ${colors.bg} ${colors.text} ${colors.border}">
        ${name}
      </span>
    `;
  }
}

customElements.define('skill-chip', SkillChip);