import { AutoSkeleton } from 'auto-skeleton-react';function ProfilePage() {  const [loading, setLoading] = useState(true);  const [user, setUser] = useState(null);  useEffect(() => {    fetchUser().then(data => {      setUser(data);      setLoading(false);    });  }, []);  return (    <AutoSkeleton loading={loading}>      <div style={{ display: 'flex', gap: 16, padding: 20 }}>        <img          src={user?.avatar || ''}          style={{ width: 80, height: 80, borderRadius: '50%' }}          alt="Avatar"        />        <div style={{ flex: 1 }}>          <h2 style={{ margin: 0, marginBottom: 8 }}>{user?.name || 'Name'}</h2>          <p style={{ margin: 0, color: '#666', marginBottom: 12 }}>            {user?.bio || 'Bio text here'}          </p>          <button            style={{              padding: '8px 16px',              borderRadius: 6,              border: 'none',              background: '#0070f3',              color: 'white',            }}          >            Follow          </button>        </div>      </div>    </AutoSkeleton>  );}

function ProductCard({ product, loading }) {  return (    <AutoSkeleton loading={loading}>      <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16, maxWidth: 300 }}>        <img          src={product.image}          style={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 4 }}          alt={product.name}        />        <h3 style={{ marginTop: 12, marginBottom: 8 }}>{product.name}</h3>        <p style={{ color: '#666', fontSize: 14, marginBottom: 12 }}>          {product.description}        </p>        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>          <span style={{ fontSize: 24, fontWeight: 'bold' }}>${product.price}</span>          <button            style={{              padding: '8px 24px',              borderRadius: 6,              border: 'none',              background: '#10b981',              color: 'white',            }}          >            Add to Cart          </button>        </div>      </div>    </AutoSkeleton>  );}

function DashboardStats({ stats, loading }) {  return (    <AutoSkeleton loading={loading}>      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: 20 }}>        {stats.map(stat => (          <div key={stat.label} style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>            <div style={{ fontSize: 14, color: '#666', marginBottom: 8 }}>{stat.label}</div>            <div style={{ fontSize: 32, fontWeight: 'bold' }}>{stat.value}</div>            <div style={{ fontSize: 12, color: stat.trend > 0 ? '#10b981' : '#ef4444', marginTop: 8 }}>              {stat.trend > 0 ? '+' : ''}{stat.trend}% from last month            </div>          </div>        ))}      </div>    </AutoSkeleton>  );}

function SettingsForm({ loading }) {  return (    <AutoSkeleton loading={loading}>      <div style={{ padding: 20, maxWidth: 500 }}>        <h3>Account Settings</h3>        {/* This notice stays visible while loading */}        <div data-no-skeleton style={{ background: '#fef3c7', padding: 12, borderRadius: 8, marginBottom: 16 }}>          <strong>Note:</strong> Changes require email verification.        </div>        <div style={{ marginBottom: 16 }}>          <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>Display Name</label>          <input            type="text"            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6 }}            placeholder="Your name"          />        </div>        <div style={{ marginBottom: 16 }}>          <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>Email</label>          <input            type="email"            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6 }}            placeholder="[email protected]"          />        </div>        <div style={{ display: 'flex', gap: 12 }}>          <button className="no-skeleton" style={{ padding: '8px 16px' }}>Cancel</button>          <button style={{ padding: '8px 16px', background: '#0070f3', color: 'white', border: 'none', borderRadius: 6 }}>            Save Changes          </button>        </div>      </div>    </AutoSkeleton>  );}

function UsersPage() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);  const placeholders = [    { id: 1, name: 'Placeholder', email: '[email protected]', role: 'Admin' },    { id: 2, name: 'Placeholder', email: '[email protected]', role: 'Editor' },    { id: 3, name: 'Placeholder', email: '[email protected]', role: 'Viewer' },  ];  useEffect(() => {    fetchUsers().then(data => {      setUsers(data);      setLoading(false);    });  }, []);  const displayUsers = loading ? placeholders : users;  return (    <AutoSkeleton loading={loading}>      <table style={{ width: '100%', borderCollapse: 'collapse' }}>        <thead>          <tr>            <th style={{ textAlign: 'left', padding: '12px 16px', borderBottom: '2px solid #e5e7eb' }}>Name</th>            <th style={{ textAlign: 'left', padding: '12px 16px', borderBottom: '2px solid #e5e7eb' }}>Email</th>            <th style={{ textAlign: 'left', padding: '12px 16px', borderBottom: '2px solid #e5e7eb' }}>Role</th>          </tr>        </thead>        <tbody>          {displayUsers.map(user => (            <tr key={user.id}>              <td style={{ padding: '12px 16px', borderBottom: '1px solid #e5e7eb' }}>{user.name}</td>              <td style={{ padding: '12px 16px', borderBottom: '1px solid #e5e7eb' }}>{user.email}</td>              <td style={{ padding: '12px 16px', borderBottom: '1px solid #e5e7eb' }}>{user.role}</td>            </tr>          ))}        </tbody>      </table>    </AutoSkeleton>  );}

<AutoSkeleton  loading={loading}  config={{    baseColor: '#374151',    highlightColor: '#4b5563',    animation: 'pulse',  }}>  <div style={{ background: '#1f2937', color: '#f9fafb', padding: 20 }}>    <h2>Dashboard</h2>    <p>Dark mode content here...</p>  </div></AutoSkeleton>