import * as React from 'react'

import {cn} from '../../lib/utils'
import {Skeleton} from '../ui/skeleton'

interface MerchantCardSkeletonProps extends React.ComponentProps<'div'> {}

function MerchantCardSkeleton({
  className,
  ...props
}: MerchantCardSkeletonProps) {
  return (
    <div
      className={cn(
        'relative w-full aspect-square overflow-hidden rounded-xl border border-gray-100',
        className
      )}
      {...props}
    >
      <div className="w-full h-2/3">
        <Skeleton className="w-full h-full" />
      </div>
      <div className="mt-3 mb-3 ml-3">
        <Skeleton className="mb-2 h-4 w-2/3" />
        <Skeleton className="mb-2 h-5 w-1/3" />
      </div>
    </div>
  )
}

export {MerchantCardSkeleton}