import React from 'react'
import { MiniCartBundle } from 'presets/BundleProduct'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard/typings'
import { CheckoutCartBundleProps } from 'presets/BundleProduct'
import { Header } from 'presets/BundleProduct'

const renderHeader = (
  props: CheckoutCartBundleProps,
  state: AnimatedCardState
) => {
  return (
    <Header isExpanded={state.isExpanded}>
      {'I am the renderProp to override renderHeader()'}
      <button style={{ marginLeft: '20px' }} onClick={state.handleToggle}>
        {'click to expand'}
      </button>
    </Header>
  )
}

const renderProduct = () => {
  return 'I am the renderProp to override renderProduct()'
}

class MiniCartBundleThemed extends React.Component {
  render() {
    const attributes = {
      renderHeader,
      renderProduct,
    }
    return <MiniCartBundle {...this.props} {...attributes} />
  }
}

export { MiniCartBundleThemed }
export default MiniCartBundleThemed