import React from 'react'
import { Background } from 'playbook-ui'
import { Flex } from 'playbook-ui'

const BackgroundCategory = (props) => (
  <Flex
      gap="md"
      justify="center"
      wrap
  >
    <Background
        backgroundColor="category_1"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_2"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_3"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_4"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_5"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_6"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_7"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_8"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_9"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_10"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_11"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_12"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_13"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_14"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_15"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_16"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_17"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_18"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_19"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_20"
        padding="xl"
        {...props}
    />
    <Background
        backgroundColor="category_21"
        padding="xl"
        {...props}
    />
  </Flex>
)

export default BackgroundCategory