import React from 'react'
import { Text } from '../text'
import { Button } from '../button'

export const Guide = ({
  title,
  titleVariant = 'heading-secondary',
  text,
  textVariant,
  textParams,
  actions = [],
  as: Element = 'div',
  children,
  align = 'center',
  style = {},
  ...props
}) => (
  <Element {...props} style={{ textAlign: align, ...style }}>
    <style href="@ossy/design-system/guide" precedence='high'>
    {`
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    `}
    </style>
    <div>
      {title && (
        <Text as="h2" variant={titleVariant} text={title} style={{ marginBottom: 'var(--space-s)' }} />
      )}
      {
        !!text
          ? <Text variant={textVariant} text={text} params={textParams} style={{ marginBottom: 'var(--space-m)' }} />
          : children
      }
      <div style={{ display: 'flex', gap: 'var(--space-m)', justifyContent: 'center' }}>
        {actions.map(({ label, key, ...actionProps }) => (
          <Button {...actionProps} key={key ?? label} label={label} />
        ))}
      </div>
    </div>
  </Element>
)