import React from "react";
import { useColor } from "../theme.ts";
import figures from "figures";
import { Span } from "paintcannon-react";
import { TerminalFlex } from "./terminal-flex.tsx";
export const IndicatorComponent = ({ isSelected = false }: { isSelected?: boolean }) => {
  const themeColor = useColor();
  return (
    <TerminalFlex
      style={{
        marginRight: 1,
        flexShrink: 0,
      }}
    >
      {isSelected ? (
        <Span
          style={{
            color: themeColor,
          }}
        >
          {figures.pointer}
        </Span>
      ) : (
        <Span> </Span>
      )}
    </TerminalFlex>
  );
};
export const ItemComponent = ({
  isSelected = false,
  label,
}: {
  isSelected?: boolean;
  label: string;
}) => {
  const themeColor = useColor();
  return (
    <Span
      style={{
        color: isSelected ? themeColor : undefined,
      }}
    >
      {label}
    </Span>
  );
};