import React from 'react'
import { ProductItemProps } from './typings'
import {
  StyledProductName,
  StyledProductFacets,
  StyledProductDescription,
  StyledProductImage,
  StyledProductPrice,
  ProductNavigationLink,
} from './styled'

function defaultRenderPrice(props: ProductItemProps) {
  const { item } = props
  const {
    salePrice,
    regularPrice
  } = item
  return <StyledProductPrice salePrice={salePrice} regularPrice={regularPrice} />
}

function defaultRenderSkuId(props: ProductItemProps) {
  const { item } = props
  const { skuId } = item
  return <StyledProductFacets list={skuId} />
}

function defaultRenderDescription(props: ProductItemProps) {
  const { item } = props
  const { description } = item
  return <StyledProductDescription content={description} />
}

function defaultRenderTitle(props: ProductItemProps) {
  const { item } = props
  const { title, navigationUrl } = item
  return <ProductNavigationLink to={navigationUrl}><StyledProductName content={title} /></ProductNavigationLink>
}

function defaultRenderImage(props: ProductItemProps) {
  const { item } = props
  const { image, navigationUrl } = item
  return <ProductNavigationLink to={navigationUrl}><StyledProductImage src={image} /></ProductNavigationLink>
}

export {
  defaultRenderPrice,
  defaultRenderSkuId,
  defaultRenderDescription,
  defaultRenderTitle,
  defaultRenderImage,
}