interface ToastProps {
  id: string | number;
  title: string;
  description: string;
  type?: 'success' | 'error' | 'warning' | 'info' | 'default';
  actions?: React.ReactNode;
}
 
export const CustomToast = (props: ToastProps) => {
  const { title, description, id, type, actions } = props;
 
  return (
    <Alert className="max-w-[400px]" variant={type || 'default'}>
      <AlertIcon type={type || 'default'} />
      <div className="flex flex-col gap-3 pr-4 pl-8">
        <div className="min-w-0 flex-1">
          <AlertTitle>{title}</AlertTitle>
          {description && (
            <AlertDescription className="mt-1">{description}</AlertDescription>
          )}
        </div>
        {actions}
      </div>
      <Button
        variant="link"
        isIconOnly
        size="sm"
        onClick={() => {
          toast.dismiss(id);
        }}
        className="absolute top-2 right-2"
      >
        <X />
      </Button>
    </Alert>
  );
};