import { Skeleton } from '@chakra-ui/react'
import useProductSimilar from '~/modules/product-similar/hooks/useProductSimilar'
import ProductSlider from '~/modules/product-slider'
import { IProductDetail } from '~/types/product'

type Props = {
  product: IProductDetail
}

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

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

  return (
    <Skeleton
      isLoaded={!productSimilar.isLoading}
      rounded='lg'
      className='h-[350px]'
    >
      <ProductSlider products={products} productLayout='vertical' />
    </Skeleton>
  );
}

export default SimilarBottom