/**
 * People Directory App - View all team members
 */

import React, { useState } from 'react';

export function PeopleDirectory() {
  const [people] = useState([
    { id: 1, name: 'Alice Johnson', title: 'Lead Designer', email: 'alice@example.com', admin: true },
    { id: 2, name: 'Bob Smith', title: 'Senior Developer', email: 'bob@example.com', admin: false },
    { id: 3, name: 'Charlie Davis', title: 'Content Strategist', email: 'charlie@example.com', admin: false },
    { id: 4, name: 'Diana Prince', title: 'QA Engineer', email: 'diana@example.com', admin: false },
  ]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Team Directory</h1>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '16px' }}>
        {people.map(person => (
          <div key={person.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '8px', 
            padding: '20px', 
            background: 'white',
            display: 'flex',
            alignItems: 'center'
          }}>
            <div style={{ 
              width: '60px', 
              height: '60px', 
              borderRadius: '50%', 
              background: '#1d8cf8', 
              color: 'white',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '24px',
              fontWeight: 'bold',
              marginRight: '16px'
            }}>
              {person.name.charAt(0)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 'bold', marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                {person.name}
                {person.admin && (
                  <span style={{ fontSize: '10px', padding: '2px 6px', background: '#ffc107', color: 'white', borderRadius: '10px' }}>
                    ADMIN
                  </span>
                )}
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>{person.title}</div>
              <div style={{ fontSize: '12px', color: '#999' }}>{person.email}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
