import React from 'react';
import { BoxDivProps, SilkeBox } from '../silke-box';
import { SilkeButton, SilkeButtonProps } from '../silke-button';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import styles from './silke-action-box.scss';
import { SilkeLink } from '../silke-link';

export type ActionBoxKind = 'inline' | 'stacked' | 'centered';

export type SilkeActionBoxProps = {
  kind: ActionBoxKind;
  title?: string;
  children?: React.ReactNode;
  icon?: SilkeIcons;
  link?: {
    label: string;
    href: string;
    external?: boolean;
  };
  buttons?: SilkeButtonProps[];
} & Omit<BoxDivProps, 'height' | 'width' | 'tag'>;

export function SilkeActionBox({
  className,
  title,
  children,
  kind = 'inline',
  icon,
  link,
  buttons,
  ...rest
}: SilkeActionBoxProps) {
  const cl: string[] = [styles.wrapper];

  if (className) cl.push(className);
  if (kind) cl.push(styles[kind]);
  if (!icon) cl.push(styles.noIcon);

  return (
    <SilkeBox rounded="small" className={cl.join(' ')} {...rest}>
      <div className={styles.content}>
        {icon && (
          <SilkeBox size="m" align="center">
            <SilkeIcon icon={icon} />
          </SilkeBox>
        )}
        <div className={styles.body}>
          <div className={styles.title}>{title || children}</div>

          {link && (
            <SilkeLink href={link.href} className={styles.link} external={link.external}>
              {link.label}
            </SilkeLink>
          )}

          {buttons && (
            <div className={styles.buttons}>
              {buttons.map((button, i) => (
                <SilkeButton {...button} size="s" fill={kind === 'centered'} key={i} />
              ))}
            </div>
          )}
        </div>
      </div>
    </SilkeBox>
  );
}