import React from "react";
import { Box, Text } from "./Ink";

export enum Step {
  Entity = 0,
  Fields = 1,
  Filters = 2,
  Results = 3,
}

type BreadcrumbProps = {
  step: Step;
};

export const Breadcrumb = ({ step }: BreadcrumbProps) => {
  return (
    <Box gap={1}>
      <Text bold={step === Step.Entity}>Entity</Text>
      <Text color={step >= Step.Fields ? "white" : "gray"}>{">"}</Text>
      <Text
        bold={step === Step.Fields}
        color={step >= Step.Fields ? "white" : "gray"}
      >
        Fields
      </Text>
      <Text color={step >= Step.Filters ? "white" : "gray"}>{">"}</Text>
      <Text
        bold={step === Step.Filters}
        color={step >= Step.Filters ? "white" : "gray"}
      >
        Filters
      </Text>
      <Text color={step >= Step.Results ? "white" : "gray"}>{">"}</Text>
      <Text
        bold={step === Step.Results}
        color={step >= Step.Results ? "white" : "gray"}
      >
        Results
      </Text>
    </Box>
  );
};