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

  connectedCallback() {
    const type = this.getAttribute('type') || 'courage';
    const name = this.getAttribute('name') || '';
    const title = this.getAttribute('title') || '';
    const description = this.getAttribute('description') || '';
    const image = this.getAttribute('image') || 'http://static.photos/people/200x200';
    const source = this.getAttribute('source') || '#';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 1rem;
        }
        .profile-card {
          border-radius: 0.5rem;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: transform 0.2s;
        }
        .profile-card:hover {
          transform: translateY(-2px);
        }
        .profile-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        .profile-content {
          padding: 1rem;
          background: var(--card-bg, #1f2937);
        }
        .profile-name {
          font-weight: 600;
          font-size: 1.125rem;
          margin-bottom: 0.25rem;
        }
        .profile-title {
          color: var(--text-secondary, #9ca3af);
          font-size: 0.875rem;
          margin-bottom: 0.5rem;
        }
        .profile-description {
          font-size: 0.875rem;
          margin-bottom: 0.75rem;
        }
        .profile-source {
          color: var(--text-secondary, #9ca3af);
          font-size: 0.75rem;
          text-decoration: none;
        }
        .profile-source:hover {
          text-decoration: underline;
        }
        .courage {
          --card-bg: #1a2e05;
          border-left: 4px solid #10b981;
        }
        .cowardice {
          --card-bg: #2e051a;
          border-left: 4px solid #ef4444;
        }
      </style>
      <div class="profile-card ${type}">
        <img src="${image}" alt="${name}" class="profile-image">
        <div class="profile-content">
          <div class="profile-name">${name}</div>
          <div class="profile-title">${title}</div>
          <div class="profile-description">${description}</div>
          <a href="${source}" class="profile-source" target="_blank">Source</a>
        </div>
      </div>
    `;
  }
}

customElements.define('profile-card', ProfileCard);