// Team Card Component
export function TeamCard({ team, title, description, icon, onClick }) {
  return `
    <div class="team-card" data-team="${team}" onclick="${onClick}">
      <div class="team-card__icon">
        ${icon}
      </div>
      <h2>${title}</h2>
      <p>${description}</p>
    </div>
  `;
}

// Team configurations
export const TeamConfigs = {
  ui: {
    title: 'UI Team',
    description: 'Components & Tokens',
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <path d="M3 9h18"/>
      <path d="M9 21V9"/>
    </svg>`,
    color: '#00d4aa'
  },
  ux: {
    title: 'UX Team',
    description: 'Consistency & Validation',
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 16v-4"/>
      <path d="M12 8h.01"/>
    </svg>`,
    color: '#7c3aed'
  },
  qa: {
    title: 'QA Team',
    description: 'Quality & Testing',
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
      <polyline points="22 4 12 14.01 9 11.01"/>
    </svg>`,
    color: '#f59e0b'
  }
};

export default TeamCard;
