import { Avatar, AvatarFallback, AvatarImage } from '@ui/components/ui/avatar'

export function RecentSales() {
  return (
    <div className='space-y-8'>
      <div className='flex items-center gap-4'>
        <Avatar className='h-9 w-9'>
          <AvatarImage src='/avatars/01.png' alt='Avatar' />
          <AvatarFallback>NR</AvatarFallback>
        </Avatar>
        <div className='flex flex-1 flex-wrap items-center justify-between'>
          <div className='space-y-1'>
            <p className='text-sm leading-none font-medium'>Nadia Rahma</p>
            <p className='text-sm text-muted-foreground'>
              User profile updated
            </p>
          </div>
          <div className='font-medium'>2m ago</div>
        </div>
      </div>
      <div className='flex items-center gap-4'>
        <Avatar className='flex h-9 w-9 items-center justify-center space-y-0 border'>
          <AvatarImage src='/avatars/02.png' alt='Avatar' />
          <AvatarFallback>AH</AvatarFallback>
        </Avatar>
        <div className='flex flex-1 flex-wrap items-center justify-between'>
          <div className='space-y-1'>
            <p className='text-sm leading-none font-medium'>Arif Hidayat</p>
            <p className='text-sm text-muted-foreground'>
              Assigned to branch Surabaya
            </p>
          </div>
          <div className='font-medium'>12m ago</div>
        </div>
      </div>
      <div className='flex items-center gap-4'>
        <Avatar className='h-9 w-9'>
          <AvatarImage src='/avatars/03.png' alt='Avatar' />
          <AvatarFallback>DS</AvatarFallback>
        </Avatar>
        <div className='flex flex-1 flex-wrap items-center justify-between'>
          <div className='space-y-1'>
            <p className='text-sm leading-none font-medium'>Dewi Safitri</p>
            <p className='text-sm text-muted-foreground'>
              Department changed to Finance
            </p>
          </div>
          <div className='font-medium'>27m ago</div>
        </div>
      </div>

      <div className='flex items-center gap-4'>
        <Avatar className='h-9 w-9'>
          <AvatarImage src='/avatars/04.png' alt='Avatar' />
          <AvatarFallback>RP</AvatarFallback>
        </Avatar>
        <div className='flex flex-1 flex-wrap items-center justify-between'>
          <div className='space-y-1'>
            <p className='text-sm leading-none font-medium'>Rian Putra</p>
            <p className='text-sm text-muted-foreground'>New user created</p>
          </div>
          <div className='font-medium'>1h ago</div>
        </div>
      </div>

      <div className='flex items-center gap-4'>
        <Avatar className='h-9 w-9'>
          <AvatarImage src='/avatars/05.png' alt='Avatar' />
          <AvatarFallback>LK</AvatarFallback>
        </Avatar>
        <div className='flex flex-1 flex-wrap items-center justify-between'>
          <div className='space-y-1'>
            <p className='text-sm leading-none font-medium'>Lina Kusuma</p>
            <p className='text-sm text-muted-foreground'>
              Status changed to inactive
            </p>
          </div>
          <div className='font-medium'>2h ago</div>
        </div>
      </div>
    </div>
  )
}