render(
  <Logo
    name="services"
    size="xl"
    theme="color"
    title="Planning Center Services"
  />
)

render(() => {
  const [selectedLogo, selectedSelectedLogo] = React.useState('people')
  const logoOptions = [
    { value: 'api', label: 'API' },
    { value: 'calendar', label: 'Calendar' },
    { value: 'check-ins', label: 'Check-Ins' },
    { value: 'church-center', label: 'Church Center' },
    { value: 'giving', label: 'Giving' },
    { value: 'groups', label: 'Groups' },
    { value: 'headcounts', label: 'Headcounts' },
    { value: 'home', label: 'Home' },
    { value: 'login', label: 'Login' },
    { value: 'music-stand', label: 'Music Stand' },
    { value: 'people', label: 'People' },
    { value: 'planning-center', label: 'Planning Center' },
    { value: 'publishing', label: 'Publishing' },
    { value: 'registrations', label: 'Registrations' },
    { value: 'services', label: 'Services' },
  ]
  return (
    <StackView
      axis="vertical"
      alignment="start"
      distribution="start"
      spacing={4}
      width="100%"
    >
      <Box>
        <Select
          basis={26}
          onChange={(event) => selectedSelectedLogo(event.value)}
          defaultValue={selectedLogo}
        >
          {logoOptions.map((option, index) => (
            <Select.Option key={index} value={option.value}>
              {option.label}
            </Select.Option>
          ))}
        </Select>
      </Box>
      <StackView
        alignment="start"
        axis="vertical"
        distribution="start"
        spacing={2}
        width="100%"
      >
        <Text
          borderBottomColor="grey-4"
          borderBottomWidth={1}
          color="grey-9"
          paddingBottom={1}
          width="100%"
        >
          <code>{`name="${selectedLogo}"`}</code>
        </Text>
        <StackView axis="horizontal" flexWrap="wrap" spacing={3}>
          <Box backgroundColor="white" display="inline-flex" padding={2}>
            <Logo
              name={selectedLogo}
              markOnly={false}
              size="xl"
              theme="color"
            />
          </Box>
          <Box
            backgroundColor="grey-9"
            borderRadius={8}
            display="inline-flex"
            padding={2}
          >
            <Logo
              name={selectedLogo}
              markOnly={false}
              size="xl"
              theme="white"
            />
          </Box>
        </StackView>
      </StackView>
      <StackView
        alignment="start"
        axis="vertical"
        distribution="start"
        spacing={2}
        width="100%"
      >
        <Text
          borderBottomColor="grey-4"
          borderBottomWidth={1}
          color="grey-9"
          paddingBottom={1}
          width="100%"
        >
          <code>{`markOnly={true}`}</code>
        </Text>
        <StackView axis="horizontal" spacing={3}>
          <Box display="inline-flex" padding={1}>
            <Logo name={selectedLogo} markOnly={true} size="sm" theme="color" />
          </Box>
          <Box
            backgroundColor="grey-9"
            borderRadius={8}
            display="inline-flex"
            padding={1}
          >
            <Logo name={selectedLogo} markOnly={true} size="sm" theme="white" />
          </Box>
        </StackView>
      </StackView>
    </StackView>
  )
})