import React from 'react';
import { SilkeIcon, SilkeIcons } from '../silke-icon';
import { SilkeBox } from '../silke-box';
import styles from './silke-breadcrumb.scss';
import { SilkeText } from '../silke-text';
import { IEmojiIcon } from '@vev/utils';
import { SilkeImage } from '../silke-image';

type SilkeBreadcrumbProps = {
  icon?: IEmojiIcon | SilkeIcons;
  label?: React.ReactNode;
  noSlash?: boolean;
  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
};

export function SilkeBreadcrumb({ icon, label, noSlash, onClick }: SilkeBreadcrumbProps) {
  let cl = styles.breadbrumb;
  if (onClick) cl += ' ' + styles.interactive;
  const text = <SilkeText overflow>{label}</SilkeText>;
  return (
    <SilkeBox height="s" gap="xs" vAlign="center" className={cl} tag="li">
      {onClick ? (
        <a
          onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
            event.preventDefault();
            onClick(event);
          }}
          href="#"
        >
          <SilkeBox vAlign="center">
            {icon && (
              <SilkeImage
                icon={icon}
                avatar="s"
                style={{ marginRight: 4 }}
                className={styles.icon}
              />
            )}
            {text}
          </SilkeBox>
        </a>
      ) : (
        <>
          {icon && <SilkeImage icon={icon} avatar="s" className={styles.icon} />}
          {text}
        </>
      )}
      {!noSlash && (
        <SilkeIcon
          icon="chevron.right"
          color="neutral-50"
          style={{ fontSize: 12, fontWeight: 400, paddingTop: 4 }}
        />
      )}
    </SilkeBox>
  );
}