const themes = [
  { title: 'Default' },
  { title: 'Primary', theme: 'primary' },
  { title: 'Error', theme: 'error' },
  { title: 'Secondary Page Header', theme: 'secondaryPageHeader' },
]
const variants = ['fill', 'outline', 'naked']
render(
  <StackView alignment="center" spacing={1}>
    {variants.map((variant) => (
      <StackView key={variant} axis="horizontal" spacing={1}>
        {themes.map(({ title, theme }) => (
          <Button key={title} title={title} theme={theme} variant={variant} />
        ))}
      </StackView>
    ))}
  </StackView>
)

render(
  <StackView spacing={2}>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="person"
          spinner={true}
          variant="outline"
        />
      ))}
    </StackView>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button key={size} size={size} title="Button" />
      ))}
    </StackView>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="Button"
          iconLeft={{ name: 'general.twoPeople' }}
        />
      ))}
    </StackView>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          title="Button"
          iconRight={{ name: 'general.downCaret' }}
        />
      ))}
    </StackView>
    <StackView axis="horizontal" alignment="start" spacing={1}>
      {['xs', 'sm', 'md', 'lg'].map((size) => (
        <Button
          key={size}
          size={size}
          icon={{ name: 'general.person' }}
          tooltip={{ title: 'person' }}
          radius="circle"
        />
      ))}
    </StackView>
  </StackView>
)