import style from '../styles/side-similar.module.css'

import React from '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 (
    <div className={style['wrapper']}>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          product={product}
          layout='horizontal'
        />
      ))}
    </div>
  )
}

export default SimilarSide