import React, { FC } from "react";
import { Aligment, Button, Icon, Text } from "venice-ui";
import { useStoreState } from "../../store";

interface IEmptyState {
  title: string;
  action?: any;
  actionLabel?: string;
}
export const EmptyState: FC<IEmptyState> = ({ title, action, actionLabel }) => {
  const {orgRole} = useStoreState((state) => state.user.userDetails);
  return (
    <Aligment direction="column" gap={8} vPadding="50px">
      <Icon name="info" size={'xl2'} background="transparent" hoverBackground="transparent"/>
      <Text>{title}</Text>
      {action && (
        <Button
          text={actionLabel ? actionLabel : "Click me"}
          onClick={action}
          isDisabled={orgRole === "readOnly"}
        />
      )}
    </Aligment>
  );
};