// ❌ 타입 안전성이 없는 컴포넌트
function UserCard({ user }: any) {
  return (
    <div className="card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <span>{user.age}세</span>
    </div>
  );
}

// ❌ 사용할 때도 타입 체크 없음
function App() {
  const userData: any = {
    userName: "김개발", // name이 아닌 userName
    mail: "[email protected]", // email이 아닌 mail
    years: 30 // age가 아닌 years
  };
  
  return <UserCard user={userData} />; // 런타임에서야 에러 발견
}

// ✅ 명확한 Props 타입 정의
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  avatar?: string; // optional property
}

interface UserCardProps {
  user: User;
  onClick?: (userId: number) => void;
  showAge?: boolean;
}

// ✅ React 19의 최신 함수 컴포넌트 패턴
function UserCard({ user, onClick, showAge = true }: UserCardProps) {
  return (
    <div 
      className="card" 
      onClick={() => onClick?.(user.id)}
      role="button"
      tabIndex={0}
    >
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {showAge && <span>{user.age}세</span>}
      {user.avatar && <img src={user.avatar} alt={`${user.name} 프로필`} />}
    </div>
  );
}

// ✅ 타입 안전한 사용
function App() {
  const userData: User = {
    id: 1,
    name: "김개발",
    email: "[email protected]",
    age: 30
  };
  
  const handleUserClick = (userId: number) => {
    console.log(`User ${userId} clicked`);
  };
  
  return (
    <UserCard 
      user={userData}
      onClick={handleUserClick}
      showAge={false}
    />
  );
}

// ✅ Generic을 활용한 범용 테이블 컴포넌트
interface Column<T> {
  key: keyof T;
  title: string;
  width?: string;
  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
}

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  loading?: boolean;
  onRowClick?: (record: T, index: number) => void;
  emptyText?: string;
}

// ✅ React 19 + TypeScript 5.x 최신 패턴
function DataTable<T extends Record<string, any>>({
  data,
  columns,
  loading = false,
  onRowClick,
  emptyText = "데이터가 없습니다"
}: DataTableProps<T>) {
  if (loading) {
    return <div className="loading">로딩 중...</div>;
  }

  if (data.length === 0) {
    return <div className="empty">{emptyText}</div>;
  }

  return (
    <table className="data-table">
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={String(column.key)} style={{ width: column.width }}>
              {column.title}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((record, index) => (
          <tr 
            key={index}
            onClick={() => onRowClick?.(record, index)}
            className={onRowClick ? 'clickable' : ''}
          >
            {columns.map((column) => (
              <td key={String(column.key)}>
                {column.render 
                  ? column.render(record[column.key], record, index)
                  : String(record[column.key] ?? '')
                }
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// ✅ 사용 예시 - 사용자 테이블
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
  lastLogin: Date;
}

function UserManagement() {
  const users: User[] = [
    { id: 1, name: "김개발", email: "[email protected]", role: "admin", lastLogin: new Date() }
  ];

  const userColumns: Column<User>[] = [
    { key: 'name', title: '이름', width: '150px' },
    { key: 'email', title: '이메일', width: '200px' },
    { 
      key: 'role', 
      title: '권한', 
      width: '100px',
      render: (role: User['role']) => (
        <span className={`badge ${role}`}>
          {role === 'admin' ? '관리자' : '사용자'}
        </span>
      )
    },
    {
      key: 'lastLogin',
      title: '최근 로그인',
      render: (date: Date) => date.toLocaleDateString('ko-KR')
    }
  ];

  return (
    <DataTable<User>
      data={users}
      columns={userColumns}
      onRowClick={(user) => console.log('선택된 사용자:', user.name)}
      emptyText="등록된 사용자가 없습니다"
    />
  );
}