import faker from "https://cdn.skypack.dev/faker@5.5.3";
import { FixedSizeList as List } from "https://cdn.skypack.dev/react-window@1.8.6";

faker.seed(3)

const data = Array.from({ length: 50 }, () => ({
  avatar: faker.internet.avatar(),
  name: faker.name.findName(),
  username: faker.internet.userName(),
  email: faker.internet.email(),
}))

function ExpensiveItem({ avatar, name, username, email, ...props }) {
  return (
    <li className='py-4 flex' {...props}>
      <img className='h-10 w-10 rounded-full' src={avatar} alt='' />
      <div className='ml-3'>
        <p className='space-x-1'>
          <span
            className='text-base font-medium text-gray-900 whitespace-nowrap'
            style={{
              backgroundImage:
                'linear-gradient(transparent 50%, gold 50%, gold 85%,transparent 85%,transparent 100%)',
            }}>
            {name}
          </span>
          <span className='text-gray-600 text-xs'>@{username}</span>
        </p>
        <p className='text-sm text-gray-500'>{email}</p>
      </div>
    </li>
  )
}

function Skeleton({ ...props }) {
  return (
    <li className='py-4 flex' {...props}>
      <span className='h-10 w-10 rounded-full bg-gray-200 animate-pulse' />
      <div className='ml-3'>
        <p className='space-x-1'>
          <span className='inline-block h-3 w-24 bg-yellow-400 animate-pulse' />
          <span className='inline-block h-2 w-12 bg-gray-300 animate-pulse' />
        </p>
        <p className='inline-block h-2 w-44 bg-gray-200 animate-pulse' />
      </div>
    </li>
  )
}

function App() {
  return (
    <main className='grid place-items-center min-h-screen'>
      <List
        height={600}
        width={400}
        itemCount={data.length}
        itemSize={76}
        useIsScrolling={true}>
        {({ index, style, isScrolling }) =>
          isScrolling ? (
            <Skeleton style={style} />
          ) : (
            <ExpensiveItem
              style={style}
              avatar={data[index].avatar}
              name={data[index].name}
              username={data[index].username}
              email={data[index].email}
            />
          )
        }
      </List>
    </main>
  )
}

ReactDOM.render(
  <App />, 
  document.getElementById("app")
)