import type {FunctionComponent} from 'react'
import {Card, CardContent} from '@/components/ui/card'
import {Skeleton} from '@/components/ui/skeleton'

const ContactCardSkeleton: FunctionComponent = () => {
  return (
    <>
      {Array(10)
        .fill(null)
        .map((_, i) => (
          <Card className="my-4 py-2" key={i}>
            <CardContent className="flex h-full px-2 gap-4">
              <Skeleton className="h-6 w-6 rounded-full" />
              <div className="flex-grow flex justify-between">
                <div>
                  <Skeleton className="w-24 h-6 mb-2" />
                  <Skeleton className="w-32 h-4" />
                </div>
                <div className="flex flex-col items-center">
                  <Skeleton className="h-6 w-6" />
                  <Skeleton className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
    </>
  )
}

export default ContactCardSkeleton
