import * as React from 'react'

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

interface ProductCardSkeletonProps extends React.ComponentProps<'div'> {
  variant?: 'default' | 'priceOverlay' | 'compact'
}

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

export {ProductCardSkeleton}