import React from 'react';
import { BoxButtonProps, SilkeBox } from '../silke-box';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import { SilkeTextSmall, SilkeTitle } from '../silke-text';
import styles from './silke-big-button.scss';
import { SilkeColor } from '../../silke-theme-provider';

type SilkeBigButtonProps = {
  label: string;
  subLabel?: string;
  leftIcon?: SilkeIcons | React.ReactElement;
  leftIconColor?: SilkeColor;
  leftIconBgColor?: SilkeColor;
  rightIcon?: SilkeIcons | React.ReactElement;
  children?: React.ReactNode;
} & BoxButtonProps;

export function SilkeBigButton({
  label,
  subLabel,
  leftIcon,
  rightIcon,
  children,
  className,
  leftIconColor,
  leftIconBgColor,
  ...rest
}: SilkeBigButtonProps) {
  let cl = styles.root;
  if (className) cl += ' ' + className;

  return (
    <SilkeBox pad="m" gap="m" vAlign="center" {...rest} tag="button" className={cl}>
      {leftIcon && (
        <SilkeBox
          size="base"
          className={!leftIconBgColor ? styles.leftIcon : ''}
          rounded
          align="center"
          bg={leftIconBgColor}
        >
          <SilkeIcon icon={leftIcon} color={leftIconColor} />
        </SilkeBox>
      )}
      <SilkeBox column flex gap="xs">
        <SilkeTitle kind="xs">{label}</SilkeTitle>
        <SilkeTextSmall tag="small">{subLabel}</SilkeTextSmall>
      </SilkeBox>
      {children}
      {rightIcon && (
        <SilkeBox size="m" align="center">
          <SilkeIcon icon={rightIcon} />
        </SilkeBox>
      )}
    </SilkeBox>
  );
}