import { Divider, Group, Loader, Text, UnstyledButton } from "@mantine/core";
import { CaretRightIcon, Icon } from "@phosphor-icons/react";

interface ListButtonProps {
  label: string;
  Icon: Icon;
  onClick: () => void;
  loading?: boolean;
}

const ListButton = ({ label, onClick, Icon, loading }: ListButtonProps) => {
  return (
    <>
      <UnstyledButton
        w="100%"
        p="md"
        component={"button"}
        onClick={onClick}
        disabled={loading}
      >
        <Group>
          <Icon weight="bold" size={20} />
          <Text fw={500} size="md">
            {label}
          </Text>
          {loading ? (
            <Loader size="sm" style={{ marginLeft: "auto" }} />
          ) : (
            <CaretRightIcon style={{ marginLeft: "auto" }} size={20} />
          )}
        </Group>
      </UnstyledButton>
      <Divider />
    </>
  );
};

export default ListButton;