import { Flex, Text } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import React from "react";
import { NavLink } from "react-router";

const BreadCrumbLink: React.FC<{ links: { label: string; to?: string }[] }> = ({
  links,
}) => {
  return (
    <Flex gap={4} align="center">
      {links?.map(({ label, to }, index) => (
        <React.Fragment key={index}>
          {to ? (
            <NavLink to={to} style={{ textDecoration: "none" }}>
              <Text
                c={"blue.10"}
                fz={14}
                style={{
                  borderBottom: "1px solid var(--mantine-color-blue-10)",
                }}
              >
                {label}
              </Text>
            </NavLink>
          ) : (
            <Text
              c={"blue.10"}
              fz={14}
              style={{
                borderBottom: "1px solid var(--mantine-color-blue-10)",
                cursor: "default",
              }}
            >
              {label}
            </Text>
          )}
          {index < links.length - 1 && <IconChevronRight size={14} />}
        </React.Fragment>
      ))}
    </Flex>
  );
};

export default BreadCrumbLink;