import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

import { Link } from '@redocly/theme/components/Link/Link';

type BreadcrumbProps = {
  label: string;
  link?: string;
  isActive: boolean;
  onClick?: () => void;
};

export function Breadcrumb({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element {
  return (
    <BreadcrumbWrapper
      data-component-name="Breadcrumbs/Breadcrumb"
      isLink={link != null}
      isActive={isActive}
      onClick={onClick}
    >
      {link ? (
        <BreadcrumbLink to={link}>{label}</BreadcrumbLink>
      ) : (
        <BreadcrumbText>{label}</BreadcrumbText>
      )}
    </BreadcrumbWrapper>
  );
}

const BreadcrumbText = styled.div`
  cursor: default;
`;

const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
  border-radius: var(--border-radius);

  ${(props) =>
    props.isLink &&
    `
    &:hover {
      text-decoration: var(--breadcrumbs-text-decoration-hover);
    }
  `}

  ${(props) =>
    props.isActive &&
    `
    color: var(--breadcrumbs-text-color-active);
  `}
`;

const BreadcrumbLink = styled(Link)`
  text-decoration: none;
  color: var(--breadcrumbs-text-color);

  &:visited {
    color: var(--breadcrumbs-text-color);
  }
`;