import { Skeleton } from '@chakra-ui/react'

import ProductCard from '~/modules/product-card'
import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
import { IProductDetail } from '~/types/product'

type Props = {
  product: IProductDetail
}

const SimilarSide = ({ product }: Props) => {
  const productSimilar = useProductSimilar({
    name: product.name,
    except: { productId: product.id, manufactureId: product.manufacture.id },
  })

  const products = productSimilar.data?.products || []

  return (
    <Skeleton
      isLoaded={!productSimilar.isLoading}
      className="h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg"
      rounded='lg'
    >
      {products.map((product) => (
        <ProductCard
          key={product.id}
          product={product}
          layout='horizontal'
        />
      ))}
    </Skeleton>
  )
}

export default SimilarSide