import {type FunctionComponent} from 'react'
import {Avatar} from '@/components/ui/avatar'
import {Skeleton} from '@/components/ui/skeleton'

const FavoriteSkeleton: FunctionComponent = () => {
  return (
    <div className="flex flex-row gap-4">
      {Array(5)
        .fill(null)
        .map((_, i) => (
          <div key={i} className="flex gap-4 flex-col">
            <Avatar className="h-20 w-20">
              <Skeleton className="w-20 h-20 rounded-full" />
            </Avatar>
            <div className="flex flex-row justify-center text-sm">
              <Skeleton className="w-6 h-4 rounded-full" /> <Skeleton className="w-6 h-4 rounded-full" />
            </div>
          </div>
        ))}
    </div>
  )
}

export default FavoriteSkeleton
