import React from 'react'
import Range from '../Range'
import RefinementList from '../RefinementList'
import SidebarSection from '../SidebarSection'
import './style.scss'

function Facets () {
  return (
    <div data-app='facets-wrapper'>
      <RefinementList title='category' attributeName='category' />
      <RefinementList title='provider' attributeName='provider' />
      <RefinementList title='type' attributeName='type' />
      <RefinementList title='brand' attributeName='brand' />
      <RefinementList title='model' attributeName='model' />
      <RefinementList title='diameter' attributeName='diameter' />
      <RefinementList title='box' attributeName='box' />

      <SidebarSection title='carbon' item={<Range attributeName='carbon' />} />
      <SidebarSection title='price' item={<Range attributeName='price' />} />
      <SidebarSection title='sail size' item={<Range attributeName='sail.size' />} />
      <SidebarSection title='board size' item={<Range attributeName='board.size' />} />
      <RefinementList title='mast size' attributeName='mast.size' />
      <RefinementList title='fin size' attributeName='fin.size' />
    </div>
  )
}

export default Facets

@@ -396,20 +396,22 @@
  title='
-type
+seller
 ' attrib
@@ -423,12 +423,14 @@
 me='
-type
+seller
 ' /%3E
@@ -581,24 +581,25 @@
  title='
-diameter
+mast type
 ' attrib
@@ -607,16 +607,21 @@
 teName='
+mast.
 diameter
@@ -654,16 +654,20 @@
  title='
+fin 
 box' att
@@ -678,16 +678,20 @@
 teName='
+fin.
 box' /%3E%0A
@@ -720,16 +720,20 @@
  title='
+mast
 carbon' 
@@ -760,16 +760,21 @@
 teName='
+mast.
 carbon' 
@@ -1164,24 +1164,93 @@
 in.size' /%3E%0A
+      %3CRefinementList title='boom size' attributeName='boom.size' /%3E%0A
     %3C/div%3E%0A 

Update facets