import { sxx } from '@graphcommerce/next-ui'
import type { SxProps, Theme } from '@mui/material'
import { Box } from '@mui/material'
import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'

export type ProductPageAddToCartRowProps = {
  sx?: SxProps<Theme>
  children: React.ReactNode
  after?: React.ReactNode
  // eslint-disable-next-line react/no-unused-prop-types
  product: UseAddProductsToCartActionFragment
}

function ProductPageAddToCartRow(props: ProductPageAddToCartRowProps) {
  const { sx, children, after } = props
  return (
    <>
      <Box
        sx={sxx(
          (theme) => ({ display: 'flex', alignItems: 'center', columnGap: theme.spacings.xs }),
          sx,
        )}
      >
        {children}
      </Box>
      {after && <Box>{after}</Box>}
    </>
  )
}

/**
 * ProductPageAddToCartActionsRow is a re-export of the ProductPageAddToCartRow which creates a
 * component that can accept plugins for the product page.
 */
export const ProductPageAddToCartActionsRow = ProductPageAddToCartRow

/**
 * ProductPageAddToCartQuantityRow is a re-export of the ProductPageAddToCartRow which creates a
 * component that can accept plugins for the product page.
 */
export const ProductPageAddToCartQuantityRow = ProductPageAddToCartRow