import { Divider, NavLink, Text } from "@mantine/core";
import { CaretRightIcon, Icon } from "@phosphor-icons/react";
import { Link, useNavigate } from "@tanstack/react-router";

interface ListLinkProps {
  label: string;
  to: string;
  Icon?: Icon;
  disabled?: boolean
}

const ListLink = ({ label, to, Icon, disabled=false }: ListLinkProps) => {
  const navigate = useNavigate();

  return (
    <>
      <NavLink
        disabled={disabled}
        w="100%"
        p="md"
        component={"button"}
        onClick={() => navigate({ to })}
        label={
          <Text fw={500} size="md">
            {label}
          </Text>
        }
        leftSection={Icon && <Icon weight="bold" size={20} />}
        rightSection={<CaretRightIcon size={20} />}
      />
      <Divider />
    </>
  );
};

export default ListLink;