import classnames from 'classnames/bind';
import * as React from 'react';
import { BoxProps, SilkeBox } from '../silke-box';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import styles from './silke-progress-indicator.scss';
import { SilkeText } from '../silke-text';

const cl = classnames.bind(styles);
type ProgressStepProps = {
  label: string;
  complete?: boolean;
  current?: boolean;
  error?: boolean;
  disabled?: boolean;
} & BoxProps;

export function ProgressStep({
  label,
  complete,
  current,
  error,
  disabled,
  ...rest
}: ProgressStepProps) {
  rest.className = cl('step', rest.className, {
    complete,
    current,
    error,
    disabled,
    clickable: Boolean(rest.onClick),
  });

  let icon: SilkeIcons = null;
  if (error) icon = 'error';
  else if (complete) icon = 'check';

  if (rest.onClick) rest.tabIndex = 0;
  return (
    <SilkeBox {...rest} gap="m">
      <div className={styles.icon}>
        <SilkeIcon className={styles.innerIcon} icon={icon} />
      </div>
      <SilkeText className={styles.label}>{label}</SilkeText>
    </SilkeBox>
  );
}