import * as React from 'react'

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

function ProductLinkSkeleton({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      className={cn(
        'relative w-full shadow-sm rounded-lg p-4 items-center',
        className
      )}
      {...props}
    >
      <div className="flex flex-row items-center justify-center w-full">
        <Skeleton className="aspect-square w-15 h-15" />
        <div className="flex flex-col justify-center items-start ml-2 w-full pt-2">
          <Skeleton className="mb-3 h-3 w-3/4" />
          <Skeleton className="mb-2 h-3 w-1/4" />
          <Skeleton className="mb-2 h-3 w-1/3" />
        </div>
      </div>
    </div>
  )
}

export {ProductLinkSkeleton}