import React, { useState } from 'react';

interface Customer {
  id: number;
  name: string;
  email: string;
  orders: number;
  spent: number;
}

export default function CustomerGrid() {
  const [customers] = useState<Customer[]>([
    { id: 501, name: 'John Doe', email: 'john@example.com', orders: 24, spent: 4567.89 },
    { id: 502, name: 'Jane Smith', email: 'jane@example.com', orders: 15, spent: 2890.50 },
    { id: 503, name: 'Bob Johnson', email: 'bob@example.com', orders: 8, spent: 1234.99 },
    { id: 504, name: 'Alice Brown', email: 'alice@example.com', orders: 31, spent: 6789.01 },
  ]);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Customer Grid</h1>
      
      <div style={styles.grid}>
        {customers.map(customer => (
          <div key={customer.id} style={styles.card}>
            <div style={styles.cardHeader}>
              <h3 style={styles.customerName}>{customer.name}</h3>
              <span style={styles.customerId}>#{customer.id}</span>
            </div>
            <div style={styles.cardBody}>
              <div style={styles.infoRow}>
                <span style={styles.label}>Email:</span>
                <span style={styles.value}>{customer.email}</span>
              </div>
              <div style={styles.statsRow}>
                <div style={styles.stat}>
                  <div style={styles.statValue}>{customer.orders}</div>
                  <div style={styles.statLabel}>Orders</div>
                </div>
                <div style={styles.stat}>
                  <div style={styles.statValue}>${customer.spent.toFixed(0)}</div>
                  <div style={styles.statLabel}>Total Spent</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: '2rem',
    backgroundColor: '#111827',
    minHeight: '100vh',
    color: '#f9fafb',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '2rem',
    color: '#f9fafb',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
    gap: '1.5rem',
  },
  card: {
    backgroundColor: '#1f2937',
    borderRadius: '0.5rem',
    border: '1px solid #374151',
    overflow: 'hidden',
  },
  cardHeader: {
    padding: '1rem',
    backgroundColor: '#374151',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  customerName: {
    fontSize: '1.125rem',
    fontWeight: '600',
    color: '#f9fafb',
  },
  customerId: {
    fontSize: '0.875rem',
    color: '#9ca3af',
  },
  cardBody: {
    padding: '1rem',
  },
  infoRow: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '1rem',
  },
  label: {
    color: '#9ca3af',
    fontSize: '0.875rem',
  },
  value: {
    color: '#d1d5db',
    fontSize: '0.875rem',
  },
  statsRow: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '1rem',
    marginTop: '1rem',
  },
  stat: {
    textAlign: 'center',
  },
  statValue: {
    fontSize: '1.5rem',
    fontWeight: 'bold',
    color: '#3b82f6',
  },
  statLabel: {
    fontSize: '0.75rem',
    color: '#9ca3af',
    marginTop: '0.25rem',
  },
};
