import { listProducts } from "@lib/data/products"
import { HttpTypes } from "@medusajs/types"
import { Text, clx } from "@medusajs/ui"

import InteractiveLink from "@modules/common/components/interactive-link"
import ProductCard from "@modules/products/components/vt-product-card"

export default async function ProductRail({
  collection,
  region,
  countryCode,
  styles,
}: {
  collection: HttpTypes.StoreCollection
  region: HttpTypes.StoreRegion
  countryCode: string
  styles?: any
}) {
  const {
    response: { products: pricedProducts },
  } = await listProducts({
    regionId: region.id,
    queryParams: {
      collection_id: collection.id,
      fields: "*variants.calculated_price",
    },
  })
  
  if (!pricedProducts) {
    return null
  }

  const classes = {
    container: styles?.container ?? "content-container py-12 px-[100px] small:py-24",
    header: {
      container: styles?.header?.container ?? "flex justify-between mb-8",
      title: styles?.header?.title ?? "txt-xlarge",
      isShowViewAll: styles?.header.isShowViewAll ?? true,
    },
    list: styles?.list ?? "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
  }

  return (
    <div className={classes.container}>
      <div className={classes.header.container}>
        <Text className={classes.header.title}>{collection.title}</Text>
        {classes.header.isShowViewAll && (
          <InteractiveLink href={`/collections/${collection.handle}`}>
            View all
          </InteractiveLink>
        )}
      </div>
      <ul className={classes.list}>
        {pricedProducts &&
          pricedProducts.map((product) => (
            <li key={product.id}>
              <ProductCard 
                product={product} 
                countryCode={countryCode} 
                styles={styles?.productCard}
                badgeText={styles?.productCard?.badgeText}
              />
            </li>
          ))}
      </ul>
    </div>
  )
}
