import React from 'react'
import { isSafe } from 'exotic'
import { wording } from 'src/words'
import { StoreProductItemDetails } from './typings'
import {
  StyledIconWithText,
  StyledProductItemList,
} from './styled'

function defaultRenderHeading(props: StoreProductItemDetails) {
  const { storeName } = props
  const hasStorePrefix = storeName.toLowerCase().includes('store')
  const text = `${(hasStorePrefix ? '' :  wording.store )} ${storeName}`

  const view = isSafe(storeName) && (
    <StyledIconWithText
      iconType={'store_mall'}
      text={text}
      tagType={'h3'}
    />
  )
  return view
}

function defaultRenderProductItemList(props: StoreProductItemDetails) {
  const { items } = props
  return <StyledProductItemList list={items} {...props}/>
}

export {
  defaultRenderHeading,
  defaultRenderProductItemList,
}