import { Link as RouterLink } from 'react-router-dom';

import { IconArrowsRightLeft } from '@material-hu/icons/tabler';
import Link from '@material-hu/mui/Link';

import ChevronRight from 'src/icons/ChevronRight';

type PostBreadcrumbProps = {
  showChevron: boolean;
  title: string;
  link: string;
  showMultiCompanyIcon?: boolean;
};

export const PostBreadcrumb = (props: PostBreadcrumbProps) => {
  const {
    showChevron = false,
    link,
    title,
    showMultiCompanyIcon = false,
  } = props;

  return (
    <>
      {showChevron && (
        <ChevronRight
          fontSize="small"
          sx={th => ({
            alignSelf: 'center',
            verticalAlign: 'middle',
            color: th.palette.new.text.neutral.lighter,
          })}
        />
      )}
      <Link
        color="textPrimary"
        component={RouterLink}
        to={link}
        variant="globalS"
        sx={th => ({
          display: 'inline',
          verticalAlign: 'middle',
          color: th.palette.new.text.neutral.default,
          textDecoration: 'none',
          fontWeight: 'semiBold',
          transition: 'color 0.2s',
          '&:hover': {
            color: th.palette.primary.main,
            textDecoration: 'underline',
          },
          mr: 1,
        })}
      >
        {title}
      </Link>
      {showMultiCompanyIcon && (
        <IconArrowsRightLeft
          size={16}
          style={{
            verticalAlign: 'middle',
            alignSelf: 'center',
          }}
        />
      )}
    </>
  );
};